Flutter的抽屉Drawer

作者: 王俏 | 来源:发表于2019-10-10 10:14 被阅读0次

    Drawer

    抽屉分为左抽屉(drawer)和右侧抽屉(endDrawer)

    class DrawerDemo extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Drawer(//抽屉
                  child: ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                      UserAccountsDrawerHeader(
                        accountName: Text('wangqiao',style:TextStyle(fontWeight: FontWeight.bold)),
                        accountEmail: Text('wangqiao@hotoneaudio.com'),
                        currentAccountPicture: CircleAvatar(//圆形头像
                          backgroundImage: NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
                        ),
                        decoration: BoxDecoration(//抽屉头的装饰器
                          color: Colors.yellow[400],//背景色
                          image: DecorationImage(
                            image: NetworkImage('https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),//背景图片
                            fit: BoxFit.cover,//填充形式
                            colorFilter: ColorFilter.mode(//颜色的过滤器
                              Colors.yellow[400].withOpacity(0.6),
                               BlendMode.hardLight
                               ),
                          ),
                        ),
                      ),
                      ListTile(
                        title: Text('Messages',textAlign: TextAlign.right,),
                        trailing: Icon(Icons.message,color:Colors.black12,size:22.0),
                        leading: Icon(Icons.menu,color:Colors.black12,size:22.0),
                        onTap: ()=>Navigator.pop(context),
                      ),
                       ListTile(
                        title: Text('Favorite',textAlign: TextAlign.right,),
                        trailing: Icon(Icons.favorite,color:Colors.black12,size:22.0),
                        leading: Icon(Icons.search,color:Colors.black12,size:22.0),
                        onTap: ()=>Navigator.pop(context),
                      ),
                       ListTile(
                        title: Text('Settings',textAlign: TextAlign.right,),
                        trailing: Icon(Icons.settings,color:Colors.black12,size:22.0),
                        leading: Icon(Icons.folder,color:Colors.black12,size:22.0),
                        onTap: ()=>Navigator.pop(context),
                      ),
                    ],
                  ),
    
                );//左侧抽屉;
      
      }
    }
    

    缺省时可点击导航栏左侧按钮

    相关文章

      网友评论

        本文标题:Flutter的抽屉Drawer

        本文链接:https://www.haomeiwen.com/subject/vfrdyctx.html