在Cupertino标签之间切换时如何重设导航器

时间:2019-06-02 09:20:29

标签: flutter flutter-navigation cupertinotabbar

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

我尝试使用导航器的pushReplacement方法,因此当用户单击更多页面时,他无法导航回到更多页面的列表。但是,切换标签时,更多页面现在不再显示,因为它已被替换。

我还尝试了调整选项卡回调方法,以弹出所有视图并将导航器返回到MoreScreen。但是,这给我带来了控制台错误: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.在按标签中的新页面然后切换标签之后。

0 个答案:

没有答案