在库比蒂诺选项卡之间切换时如何重置导航器

Question

我正在尝试在 Flutter 中设置一个多页面应用程序，其中底部选项卡包含四个最常用的页面，包括一个“更多”按钮。更多按钮显示包含其他页面链接的页面。当点击某个页面时，我希望这个页面取代“更多”页面，因此创建了一个新的导航堆栈。但是，当切换到另一个选项卡然后返回“更多”选项卡时，导航状态会被记住。这意味着我没有看到“更多”页面，而是看到切换选项卡时离开的页面。我想每次用户单击“更多”选项卡时显示“更多”页面。

我尝试过使用导航器的pushReplacement方法，因此当用户单击更多页面时，他无法导航回更多页面列表。但是，当切换选项卡时，更多页面现在永远不会显示，因为它已被替换。

我还尝试调整选项卡回调方法，以弹出所有视图并将导航器返回到更多屏幕。然而，这给我在控制台中留下了一个错误：setState() or markNeedsBuild() called during build.。

选项卡屏幕：

class TabScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TabScreenState();
  }
}

class TabScreenState extends State<TabScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
        // Prevent swipe popping of this page. Use explicit exit buttons only.
        onWillPop: () => Future<bool>.value(true),
        child: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('Artikelen'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                title: Text('Activiteiten'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.speaker_group),
                title: Text('Training'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.more),
                title: Text('Meer'),
              ),
            ],
          ),
          tabBuilder: (BuildContext context, int index) {
            assert(index >= 0 && index <= 3);
            switch (index) {
              case 0:
                return CupertinoTabView(
                  builder: (BuildContext context) {
                    Navigator.of(context).popUntil((route) => route.isFirst);

                    return ArticleListScreen();
                  },
                  defaultTitle: 'Artikelen',
                );
                break;
              case 1:
                return CupertinoTabView(
                  builder: (BuildContext context) => ActivityListScreen(),
                  defaultTitle: 'Activiteiten',
                );
                break;
              case 2:
                return CupertinoTabView(
                  builder: (BuildContext context) => ArticleListScreen(),
                  defaultTitle: 'Training',
                );
                break;
              case 3:
                return CupertinoTabView(
                  builder: (BuildContext context) {
                    Navigator.of(context).popUntil((route) => route.isFirst);

                    return MoreScreen();
                  },
                  defaultTitle: 'Meer',
                );
                break;
            }
            return null;
          },
        ),
      ),
    );
  }
}

还有一个 MoreScreen，它有一个按钮可以转到另一个页面：

class MoreScreen extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return MoreScreenState();
  }
}

class MoreScreenState extends State<MoreScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: ThemeData.dark().accentColor,
        alignment: AlignmentDirectional(0.0, 0.0),
        child: MaterialButton(
          child: Text('PUSH page'),
          onPressed: () => {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => ArticleListScreen()))
          },
        )
      ),
    );
  }
}

我希望每次切换选项卡时导航堆栈都会重置，但现在我必须使用以下命令手动执行此操作：

Navigator.of(context).popUntil((route) => route.isFirst);

这会导致错误消息：setState() or markNeedsBuild() called during build.在选项卡中推送新页面然后切换选项卡后。