Flutter开发中如何为指定页面隐藏底部导航栏？

实现逻辑 #

你当前的底部导航栏是挂载在父容器的Scaffold上的，因此只需要在父层控制bottomNavigationBar的显隐逻辑即可，不需要修改子页面代码。

具体修改步骤 #

• 首先定义需要隐藏底部导航栏的页面索引集合，比如你需要隐藏ProfilePage（对应索引为1），就先声明如下变量：

// 填写需要隐藏导航栏的页面索引
final List<int> _hideNavIndex = [1];

• 修正当前代码的索引同步bug：你现有代码中PageView的onPageChanged没有同步更新_selectedIndex，导航栏的onTap也没有调用页面跳转逻辑，需要先补全这两处逻辑
• 给Scaffold的bottomNavigationBar属性增加显隐判断：如果当前选中索引在隐藏列表内，就返回空组件，否则返回导航栏组件

修改后完整代码示例 #

int _selectedIndex = 0;
final PageController _pageController = PageController();
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
// 新增：需要隐藏导航栏的页面索引集合
final List<int> _hideNavIndex = [1];

Scaffold(
  body: PageView(
      controller: _pageController,
      children: <Widget>[
        Home(),
        ProfilePage(),
      ],
      onPageChanged: (int index) {
        setState(() {
          // 新增：同步更新选中索引
          _selectedIndex = index;
        });
      }),
  // 新增：判断是否显示导航栏
  bottomNavigationBar: _hideNavIndex.contains(_selectedIndex) 
    ? const SizedBox.shrink() 
    : CurvedNavigationBar(
    key: _bottomNavigationKey,
    index: _selectedIndex,
    height: 67.0,
    items: const [
      Icon(Icons.home),
      Icon(Icons.person),
    ],
    color: Colors.grey.shade100,
    buttonBackgroundColor: const Color.fromRGBO(153, 177, 202, 1),
    backgroundColor: Colors.white,
    animationCurve: Curves.easeInOut,
    animationDuration: const Duration(milliseconds: 400),
    onTap: (index) {
      setState(() {
        _selectedIndex = index;
        // 取消注释，实现点击导航栏切换页面
        _pageController.jumpToPage(index);
      });
    },
    letIndexChange: (index) => true,
  ),
)

补充说明 #

如果你是需要隐藏从Home/ProfilePage内部push跳转的二级页面的导航栏，不需要修改上述逻辑，只需要给二级页面自己套一个独立的Scaffold，push后会自动覆盖父级的底部导航栏。

内容的提问来源于stack exchange，提问作者Razan