Flutter中使用Drawer来绘制导航菜单。由于所有页面都需要使用到导航菜单,因此将其抽象为全局组件。由于在一次会话中,导航菜单都是固定不变的,因此可以将其定义为Stateless组件。
我们期待的效果应当是左上角出现一个汉堡菜单,点击之后左侧滑出菜单,点击菜单项可以进行路由跳转,因此,需要在全局导航菜单组件中指定所有的路由入口,并额外对外提供一个构建函数用于构建汉堡菜单。
菜单的布局应当是上方为用户账户相关信息,下方为导航路由。可以通过一个ListView来实现。
///构建菜单项 ListTile _buildListTile(BuildContext context, String title, String router,IconData icons){ return ListTile( title: Text(title), leading: Container( child: RawMaterialButton( child: new Icon( icons, size: 25.0, ), onPressed: () { Navigator.pop(context); Navigator.of(context).pushNamed(router); }, ), ), onTap: (){ Navigator.pop(context); Navigator.of(context).pushNamed(router); }, ); }
构建菜单项的函数中,接受一个常规的BuildContext,一个String类型作为实际显示的内容,一个router作为目标路由,一个IconData类型作为条目的图标。而在实际的菜单构建中,需要按照如下方式循环传入参数:
child: ListView( padding: EdgeInsets.zero, children: <Widget>[ _buildUserAccountDrawer(context), _buildListTile(context, "条码扫描", "CodeScan",Icons.scanner), _buildListTile(context, "数据重送", "ReSend",Icons.cloud_upload), _buildListTile(context, "在岗信息查看", "ShowOnlineInfo", Icons.calendar_view_day), ], ),
然后再来构建头部的账户信息。Flutter已经提供了一个名为UserAccountDrawerHeader的Widget类型,只需要传入对应参数,直接就可以自动完成布局:
///构建用户账户头部 UserAccountsDrawerHeader _buildUserAccountDrawer(BuildContext context){ return UserAccountsDrawerHeader( accountName: Text(Global.currentLoginUser,style: TextStyle(fontSize: 20),), accountEmail: null, currentAccountPicture: CircleAvatar( backgroundImage: AssetImage("lib/images/avatar.jpg"), ), ); }
这样做完之后就出来了如下效果:
原文:https://www.cnblogs.com/liuxiaopen1995/p/13821062.html