flutter - 在Flutter中具有路由的持久性BottomNavigationBar

Question

我很难在Flutter中实现持久性BottomNavigationBar。我的目标是创建一个具有多个屏幕并因此具有多个路由的应用程序(最小示例):

我找到了this的中篇文章，在对实现进行了一些努力之后，我认为我找到了理想的解决方案。 但是我想实现一个注销功能，该功能将用户发送回LoginScreen，路由无法按预期工作...

正如您在gif中看到的那样，单击注销按钮后问题就出现了。无需导航回到LoginScreen，而是使用BottomNavigationBar将LoginScreen嵌入到主屏幕中。
如何更改此行为？我以为我会删除所有带有pushAndRemoveUntil ... 的路线

// Navigate back to the LoginScreen (this doesn't work as expected...)
          Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(
                builder: (context) => LoginScreen(),
              ),
              (Route<dynamic> route) => false);

这是一个最小的可重现示例: https://github.com/klasenma/persistent_bottomnavigationbar

Answer 1

经过几次尝试，我设法解决了这个问题。我需要保存MainScreen的上下文(index.dart->保存BottomNavigationBar)。

class ContextKeeper {
  static BuildContext buildContext;

  void init(BuildContext context) {
    buildContext = context;
  }
}

lib / screens / main / index.dart:

@override
void initState() {
  super.initState();
  ContextKeeper().init(context); // Save the context
}

然后改变

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => LoginScreen(),),(Route<dynamic> route) => false);

至

 Navigator.of(ContextKeeper.buildContext).pushNamedAndRemoveUntil(LoginScreen.id, (route) => false);

它的工作。