如何在 Flutter 中使用路由制作持久抽屉?

Posted

技术标签:

【中文标题】如何在 Flutter 中使用路由制作持久抽屉?【英文标题】:How can I make a persistent drawer with routes in Flutter? 【发布时间】:2019-09-15 13:47:53 【问题描述】:

现在我的抽屉有一个类,所有页面的脚手架都使用它。当我推送一条新路线时,抽屉会重置状态。有什么办法可以对抗这个吗?我正在尝试制作一个根据路线更改所选项目背景的抽屉,但是当我单击自定义列表图块时,它只会突出显示抽屉中的第一个项目,这不是所需的结果。

在状态类的顶部:

    int selectedIndex = 0;

以下是部分代码:

      ListView.builder(
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        itemCount: _drawerItems.length,
        // primary: true,
        itemBuilder: (context, index) 
          DrawerItem currentItem = _drawerItems[index];
          return Container(
            decoration: BoxDecoration(
                color: selectedIndex == index ? Colors.blue[100] : Colors.white,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(50),
                    bottomRight: Radius.circular(50))),
            child: ListTile(
              title: Text(
                currentItem.title,
                style: TextStyle(
                  fontSize: 15.0,
                  fontFamily: "Muli",
                  letterSpacing: .3,
                  fontWeight: FontWeight.w600,
                ),
              ),
              leading: Icon(currentItem.icon, color: Colors.black),
              onTap: () 
                setState(() 
                  selectedIndex = index;
                );
                Navigator.of(context).popAndPushNamed(routes[index]);
              ,
            ),
          );
        ,
      )

【问题讨论】:

【参考方案1】:

当你推送一个新路由时,它会创建一个新的抽屉并且当前的抽屉被释放。所以setState 什么都不做。

您应该尝试将 selectedIndex 声明为静态 [或全局] 变量并将您的 onTap 更改为:

              onTap: () 
                selectedIndex = index;
                Navigator.of(context).popAndPushNamed(routes[index]);
              ,

【讨论】:

以上是关于如何在 Flutter 中使用路由制作持久抽屉?的主要内容,如果未能解决你的问题,请参考以下文章

材质 UI 中持久抽屉的路由

如何在 Flutter 中收听抽屉打开/关闭动画

如何在flutter中导入和使用另一个dart文件中的函数

Flutter - 如何测试小部件中的抽屉测试?

在 Flutter 中保持响应的同时制作持久的背景图像

Flutter - 我想把登录用户的姓名和邮箱放在抽屉里