如何在Flutter应用中按页面/路由设置底部导航栏显示状态

核心思路 #

你之前用的IndexedStack方式是把所有页面嵌套在同一个Scaffold下，底部导航栏属于这个父Scaffold，所以没法单独隐藏某个子页面的导航栏。最直接的解决方式是用Navigator管理路由：把带底部导航栏的页面作为根路由，当进入Create这类需要隐藏导航栏的流程时，直接跳转独立的无底部导航栏页面，返回时自动回到带导航栏的根页面。

代码修改步骤 #

1. 重构根页面（原CurrentPage） #

把原来的CurrentPage改名为HomePage，作为带底部导航栏的根容器，里面的tab页面作为body内容：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  // 各个tab对应的页面（无需包含底部导航栏）
  final List<Widget> _screens = const [
    FolderPage(),
    LiveBroadcastPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: false,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() => _currentIndex = index);
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.folder),
            label: 'Files',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.live_tv),
            label: 'Live Broadcasts',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

2. 修改MyApp的首页指向 #

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flytrap Audio',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

3. 实现带跳转按钮的Tab页面（比如FolderPage） #

在需要触发隐藏导航栏流程的页面里，用Navigator.push跳转独立页面：

class FolderPage extends StatelessWidget {
  const FolderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Files')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到无底部导航栏的Create页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const CreatePage()),
            );
          },
          child: const Text('Create'),
        ),
      ),
    );
  }
}

4. 实现无底部导航栏的流程页面（CreatePage） #

这个页面是独立的Scaffold，不定义bottomNavigationBar即可隐藏：

class CreatePage extends StatelessWidget {
  const CreatePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Create New Item'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: const Center(
        child: Text('Create your content here'),
      ),
      // 不设置bottomNavigationBar，自然不会显示
    );
  }
}

效果说明 #

• 浏览tab页面（Files/Live Broadcasts/Settings）时，底部导航栏正常显示；
• 点击Create按钮进入流程页面后，底部导航栏自动隐藏；
• 点击AppBar的返回按钮，回到原tab页面，底部导航栏恢复显示；
• 如果Create流程有多个页面，继续用Navigator.push跳转即可，所有流程页面都不会显示底部导航栏。

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