Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列

需求：

抽屉组件drawer的实现。

 

效果图:

一、侧边栏的实现

return Scaffold(
  appBar: AppBar( 
    title: Text("侧边栏"), 
  ),
  drawer: Drawer( 
    child: Text('左侧边栏'), 
  ),
  endDrawer: Drawer( 
    child: Text('右侧边栏'), 
  ),
);

在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏，传入 endDrawer 可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

 

二、Flutter DrawerHeader

属性	描述
decoration	设置顶部背景颜色
child	配置子元素
padding	内边距
margin	外边距

 

三、Flutter UserAccountsDrawerHeader

属性	描述
decoration	设置顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountsPictures	用来设置当前账户其他账户头像
margin	外边距

 

四、自定义点击事件打开侧边栏：

  

class _drawerState extends State<drawer> {
  //创建key
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("侧边栏"),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment:  MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("点击弹出左侧侧边栏"),
              onPressed: (){    //点击事件
                _globalKey.currentState.openDrawer();
              },
              color: Colors.blue,
            ),
            SizedBox(width: 20,),
            RaisedButton(
              child: Text("点击弹出右侧侧边栏"),
              onPressed: (){    //点击事件
                _globalKey.currentState.openEndDrawer();
              },
              color: Colors.blue,
            ),
          ],

        ),
      ),
      drawer: Drawer(
        //左侧侧边栏
       
      ),
      endDrawer: Container(	//显示右侧 侧边栏
        width: 200,	//显示侧边栏的宽度
        color: Colors.white,	//背景颜色
        child: ListView(
          children: <Widget>[
          ],
        ),
      ),
    );
  }


}

通过_globalKey.currentState.openDrawer();和_globalKey.currentState.openEndDrawer();来打开左右两侧的侧边栏

五、收起侧边栏

 Navigator.of(context).pop();   //隐藏侧边栏

六、自定义侧边栏宽度：

 endDrawer: Container(	//显示右侧 侧边栏
        width: 200,	//显示侧边栏的宽度
        color: Colors.white,	//背景颜色
        child: ListView(
          children: <Widget>[
          ],
        ),
      ),

 

完整代码如下：

class _drawerState extends State<drawer> {
  //创建key
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("侧边栏"),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment:  MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("点击弹出左侧侧边栏"),
              onPressed: (){    //点击事件
                _globalKey.currentState.openDrawer();
              },
              color: Colors.blue,
            ),
            SizedBox(width: 20,),
            RaisedButton(
              child: Text("点击弹出右侧侧边栏"),
              onPressed: (){    //点击事件
                _globalKey.currentState.openEndDrawer();
              },
              color: Colors.blue,
            ),
          ],

        ),
      ),
      drawer: Drawer(
        //左侧侧边栏
        child: ListView(
          children: [
            UserAccountsDrawerHeader( //用户信息栏
              accountName: Text("小猴猴"),
              accountEmail: Text("houruoyu333@xxx.com"),
              currentAccountPicture: CircleAvatar(  //头像
                backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608285155199&di=390e6abba282c3d1b420e32cd5e36d93&imgtype=0&src=http%3A%2F%2Fpic1.16xx8.com%2Fallimg%2F150617%2F16xx8.jpg'),
              ),
              otherAccountsPictures: <Widget>[  //其他账号头像
                CircleAvatar(backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=277107686,1381510155&fm=26&gp=0.jpg'),),
                CircleAvatar(backgroundImage: NetworkImage("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1048059854,760181649&fm=26&gp=0.jpg"),)
              ],
              onDetailsPressed: (){}, //下拉箭头
              decoration: BoxDecoration(  //背景图片
                image: DecorationImage(
                    image: NetworkImage(
                        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2491682377,1019940373&fm=26&gp=0.jpg'
                    ),
                    fit: BoxFit.cover	//图片不变性裁剪居中显示
                ),
              ),
            ),

            ListTile(
              title: Text("隐藏侧边栏"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
              onTap: (){
                Navigator.of(context).pop();   //隐藏侧边栏
              },
            ),
            ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
            ),
            ListTile(
              title: Text("用户空间"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
            ),
          ],
        ),
      ),
      endDrawer: Container(	//显示右侧 侧边栏
        width: 200,	//显示侧边栏的宽度
        color: Colors.white,	//背景颜色
        child: ListView(
          children: <Widget>[
          //一些布局样式
            DrawerHeader(
              decoration: BoxDecoration(
                  color: Colors.yellow,
                  image:DecorationImage( image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2491682377,1019940373&fm=26&gp=0.jpg"), fit:BoxFit.cover )
              ),
              child: ListView(
                children: <Widget>[
                  Text('我来组成头部')
                ],
              ),
            ),
            ListTile(
              title: Text("隐藏侧边栏"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
              onTap: (){
                Navigator.of(context).pop();   //隐藏侧边栏
              },
            ),
          ],
        ),
      ),
    );
  }


}

基础篇

------------------------------------------------------------

 

Flutter之自定义底部导航条以及页面切换实例——Flutter基础系列

Flutter之自定义顶部Tab——Flutter基础系列

Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列

Flutter之自定义按钮RaisedButton、OutlineButton、IconButton等——Flutter基础系列