Flutter 抽屉组件之Drawer滑动侧边栏

Drawer配置

以下布局是系统方法,当然可以根据需求自定义布局。

class HomePageSet extends StatefulWidget {
  HomePageSet({Key key}) : super(key: key);

  @override
  _HomePageSetState createState() => _HomePageSetState();
}

class _HomePageSetState extends State<HomePageSet> {
  int curIndex = 0;

  List PageList = [
    HomePage(),
    Payment(),
    People(),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("StatefulWidget,BottomNavigationBar"),
        ),
        body: this.PageList[this.curIndex],
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: curIndex,
            onTap: (int index) {
              print(index);
              setState(() {
                this.curIndex = index;
              });
            },
            iconSize: 40,
            fixedColor: Colors.orange,
            type: BottomNavigationBarType.fixed,
            //配置多个底布菜单
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text("首页")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.payment), title: Text("推荐")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.people), title: Text("用户中心")),
            ]),
        drawer: Drawer(//左侧侧边栏
          child: Text("hello flutter"),
        ),
        endDrawer: Drawer(//右侧侧边栏
          child: Text("hello flutter 2"),
        ),
      ),
    );
  }
}

Drawer 内容布局

DrawerHeader 自动空出顶部空间

 drawer: Drawer(//左侧侧边栏
   child: Column(//设置一个列布局
     children: <Widget>[
       Row(//行布局
         children: <Widget>[
           Expanded(//flex 布局铺满头部
               child: DrawerHeader(//抽屉头部
                   child: Text("你好flutter"),
                   decoration:BoxDecoration(
                       color: Colors.yellow,//背景颜色
                       image: DecorationImage(//背景图片
                         image: NetworkImage("https://images.com/flut.png"),
                         fit:BoxFit.cover,//充满元素
                       )
                   )
               )
           )
         ],
       ),
       ListTile(
         leading: CircleAvatar(//原型头像
             child: Icon(Icons.home)
         ),
         title: Text("我的空间"),
       ),
       Divider(),//底部间隔线
       ListTile(
         leading: CircleAvatar(//原型头像
             child: Icon(Icons.people)
         ),
         title: Text("用户中心"),
       ),
       Divider(),//底部间隔线
       ListTile(
         leading: CircleAvatar(//原型头像
             child: Icon(Icons.settings)
         ),
         title: Text("设置中心"),
       ),
       Divider(),//底部间隔线
     ],
   ),
 ),

UserAccountsDrawerHeader 抽屉头部组件可以包含用户信息数据的头部组件

 drawer: Drawer(
   child: Column(
     children: <Widget>[
       Row(
         children: <Widget>[
           Expanded(
             child: UserAccountsDrawerHeader(//顶部用户信息组件
               accountName:Text("flutter"),//昵称
               accountEmail: Text("flutter.org"),//email
               currentAccountPicture: CircleAvatar(//原型头像
                 backgroundImage: NetworkImage("https://images.com/images/flutter.png"),                        
               ),
               decoration:BoxDecoration(     //元素样式                   
                 image: DecorationImage(//背景图片
                   image: NetworkImage("https://images.com/images/flutter/2.png"),
                   fit:BoxFit.cover,//充满元素
                 )
               ),
              otherAccountsPictures: <Widget>[//右侧可以放其他用户图片。。用处暂时不明
                Image.network("//images.com/images/flutter4.png"),
                Image.network("//images.com/images/flutter5.png"),
              ],
             )
           )
         ],
       ),
       ListTile(
         leading: CircleAvatar(
           child: Icon(Icons.home)
         ),
         title: Text("我的空间"),
       ),
         Divider(),
        ListTile(
         leading: CircleAvatar(
           child: Icon(Icons.people)
         ),
         title: Text("用户中心"),
       ),
       Divider(),
       ListTile(
         leading: CircleAvatar(
           child: Icon(Icons.settings)
         ),
         title: Text("设置中心"),
       ),
         Divider(),
     ],
   ),
 ),

需求：如果在抽屉中定义路由跳转,跳转到其他页面时返回关闭侧边栏怎么操作呢?

可以通过清除路由隐藏侧边栏,路由栈清除后需要跳转回来的时候就不会打开抽屉组件

......
   Divider(),
        ListTile(
         leading: CircleAvatar(
           child: Icon(Icons.people)
         ),
         title: Text("用户中心"),
         onTap: (){
           Navigator.of(context).pop();  //隐藏侧边栏
           Navigator.pushNamed(context, '/user');//跳转到用户中心页面
         },
       ),
       Divider(),
......