Flutter 如何在下一页隐藏 Cupertino 底部导航栏答案

【问题标题】：Flutter how to hide Cupertino bottom navigation bar at next pageFlutter 如何在下一页隐藏 Cupertino 底部导航栏
【发布时间】：2021-08-25 06:16:26
【问题描述】：

我目前正在处理一个需要使用 Cupertino 小部件构建的项目。一切都很好，直到我试图不在下一页显示底部导航栏，但底部导航栏仍然从上一页向前推进。下面是我的示例代码。

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.person), label: 'Person'),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.mail), label: 'Mail'),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.flag), label: 'Flag'),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          routes: {
            'p2': (context) => PageTwo(),
          },
          builder: (context) {
            return CupertinoPageScaffold(
                backgroundColor: Colors.white,
                child: Center(
                  child: Column(
                    children: [
                
                      ElevatedButton(
                        onPressed: () {
                          Navigator.pushNamed(context, 'p2');
                        },
                        child: Text('Next Page'),
                      ),
                    ],
                  ),
                ));
          },
        );
      },
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.white,
        child: Column(children: [
          Text('Page 2'),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Back'),
          ),
        ]),
      ),
    );
  }
}

【问题讨论】：

因为您在 cupertinotabview 用户 navigator.push 命令中返回第二页并用脚手架包装您的 pagetwo 容器
@HamzaSiddiqui 感谢您的回复。删除 CupertinoTabView 后它可以工作。

标签： flutter flutter-cupertino cupertinonavigationbar

【解决方案1】：

找到解决方案。

第一个解决方案。

只是替换

Navigator.pushNamed(context,'p2');

到

Navigator.of(context, rootNavigator: true).pushNamed('p2');

第二种解决方案

如果不需要使用，请从 tabBuilder 中删除 CupertinoTabView

  tabBuilder: (context, index) {
        return CupertinoPageScaffold(
          backgroundColor: Colors.white,
          child: Center(
            child: Column(
              children: [
                SizedBox(
                  height: 50.0,
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, 'p2');
                  },
                  child: Text('Next Page'),
                ),
              ],
            ),
          ),
        );
      },

重要：必须为 CupertinoApp 类设置路由

【讨论】：

【解决方案2】：

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => YourScreen()));

【讨论】：