Flutter中如何在SearchOnScreen页面隐藏BottomNavigationBar？

你只需要根据当前选中的Tab索引，动态控制bottomNavigationBar的显示即可。具体修改如下：

在build方法里，将bottomNavigationBar的赋值改为条件判断：当索引为1（对应SearchOnScreen页面）时，返回null隐藏底部导航栏，其他情况返回原来的导航栏组件。

修改后的完整build方法代码：

@override
Widget build(BuildContext context) {
  return DefaultLayout(
    child: TabBarView(
      physics: NeverScrollableScrollPhysics(),
      controller: controller,
      children: [
        SearchOffScreen(),
        SearchOnScreen(),
        Center(child: Container(child: Text('My page'),)),
      ],
    ),
    // 核心修改部分：根据当前索引控制底部导航栏显示
    bottomNavigationBar: index == 1 
        ? null // 隐藏底部导航栏
        : Theme(
            data: ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              onTap: (int index){
                controller.animateTo(index);
                this.index = index;
              },
              currentIndex: index,
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.home_filled),
                    label: 'Home'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.search_rounded),
                    label: 'Search'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person),
                    label: 'My page'),
              ],
            ),
          ),
  );
}

逻辑说明 #

• 你的index变量已经和当前选中的Tab索引同步，利用这个变量做条件判断就能精准控制导航栏的显示状态。
• 当index == 1时，给bottomNavigationBar传入null，DefaultLayout就不会渲染底部导航栏；其他索引则正常渲染原来的BottomNavigationBar组件。

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