Flutter 的 Drawer 侧边栏以及侧边栏布局
在iOS原生开发中，实现抽屉视图还是比较麻烦的，有时还需要借助第三方组件来实现。但是在Flutter中，我们利用Drawer组件就可以很轻松实现抽屉视图。
简而言之就是，新建一个Drawer组件，然后配置给Scaffold组件的drawer属性，这样就实现侧边栏抽屉视图了。
Scaffold( //左侧侧边栏 drawer: Drawer( child: Column( children: <Widget>[ Row( children: <Widget>[ Expanded(
//DrawerHeader（可以自己定义，想实现啥功能就实现啥功能） // child: DrawerHeader( // //侧边栏的头部 // child: Text("这是侧边栏的头部"), // decoration: BoxDecoration( // // color: Colors.yellow,//头部背景颜色 // //头部背景图片 // image: DecorationImage( // image: NetworkImage("https://www.itying.com/images/flutter/2.png"), // fit: BoxFit.cover // ) // ), // ),
//UserAccountsDrawerHeader(格式比较固定) child: UserAccountsDrawerHeader( accountName: Text("拉维领队"),//姓名 accountEmail: Text("1145599720@qq.com"),//邮箱 //头像 currentAccountPicture: CircleAvatar( backgroundImage: NetworkImage("https://www.itying.com/images/flutter/2.png"), ), //装饰 decoration: BoxDecoration( color: Colors.orange ), ), ) ], ), ListTile( title: Text("我的空间"), leading: CircleAvatar( //圆角图片 child: Icon(Icons.home), ), ), Divider(), //分割线 ListTile( title: Text("用户中心"), leading: CircleAvatar( child: Icon(Icons.verified_user), ), //监听点击实现 onTap: (){ //收起抽屉视图 Navigator.pop(context); //跳转到用户中心页面 Navigator.pushNamed(context, "/userCenterPage"); }, ), Divider(), //分割线 ListTile( title: Text("设置中心"), leading: CircleAvatar( child: Icon(Icons.settings), ), ) ], ), ),
//右侧侧边栏 endDrawer: Drawer( child: Text("右侧侧边栏"), ), //配置顶部导航栏 appBar: AppBar( title: Text("DrawerDemo"), ), body: _tabPages[_tabbarIndex], bottomNavigationBar: BottomNavigationBar( //这里是配置底部tabBar的代码 ), );效果如下：
关于上面代码，有以下几点需要说明：
1，通过配置Scaffold的drawer属性，我们可以实现左侧侧边栏；通过配置Scaffold的endDrawer属性，我们可以实现右侧侧边栏。
2，配置了Scaffold的drawer属性或者endDrawer属性之后，flutter会自动帮我们在顶部导航栏的左侧或者右侧加上一个按钮，如下图所示：
3，抽屉视图通过 Drawer 组件来实现。
4，我们可以自己来配置抽屉视图，一般是通过Column组件来定义侧边栏的内容。
5，Divider组件可以用来实现分割线。
6，可以通过 DrawerHeader 或者 UserAccountsDrawerHeader 组件来实现抽屉视图的头部。DrawerHeader可以自定义，想实现啥功能就实现啥功能；而 UserAccountsDrawerHeader 的布局、样式和内容是固定的，如果对个性化要求不高，个人还是倾向于使用UserAccountsDrawerHeader。
7，无论是DrawerHeader 还是 UserAccountsDrawerHeader 组件，我们都可以使用 decoration 来装饰，可以用 BoxDecoration 来配置侧边栏头部的背景颜色、背景图片等。
8，可以通过配置 ListTile 的 onTap 来监听 ListTile 的点击事件。
9，当点击抽屉视图中的某个组件来跳转到另外一个页面，然后从这个页面返回的时候，默认情况下，抽屉视图是不会消失的，也就是说，再返回回来的时候，抽屉视图效果还是存在的。
那么，当点击抽屉视图中的某个组件来跳转到另外一个页面，然后从这个页面返回的时候，如何让抽屉视图消失呢？我们在页面跳转之前通过 Navigator.pop(context); 这行代码来实现“隐藏抽屉视图”的功能。
以上。
腾讯云开发者
