首页 > 其他 > 详细

导航菜单

时间:2020-10-15 22:27:58      阅读:46      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!