Flutter 如何在特定屏幕中隐藏 bottomnavbar？

Question

我有一个底部导航栏，但在某些页面中我想隐藏它。我怎样才能做到？例如，我想在 HomeScreen 中看到 appbar，但我不想在搜索屏幕上看到它。我的代码是这样的：

Scaffold(
      backgroundColor: _selectedIndex == 0 ? Colors.transparent : Colors.white,
      extendBodyBehindAppBar: _selectedIndex == 0 ? true : false,
      bottomNavigationBar: _navBarItems,
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = const HomeScreen();
          if (settings.name == '/help_center') {
            page = const HelpCenterScreen();
          } else if (settings.name == '/search') {
            page = const SearchScreen();
          }
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );

Answer 1

使用可见性小部件简单包装 _navBarItems：

//class variable
bool _isVisible = true;//default true

Scaffold(
  backgroundColor: _selectedIndex == 0 ? Colors.transparent : Colors.white,
  extendBodyBehindAppBar: _selectedIndex == 0 ? true : false,
  bottomNavigationBar: Visibility(
       visible: _isVisible,
       child: _navBarItems,
  ),
  body: Navigator(
    onGenerateRoute: (settings) {
      Widget page = const HomeScreen();
      if (settings.name == '/help_center') {
        page = const HelpCenterScreen();
        setState(() {
           _isVisible = true;
        });
      } else if (settings.name == '/search') {
        setState(() {
           _isVisible = false;
        });
        page = const SearchScreen();
      }
      return MaterialPageRoute(builder: (_) => page);
    },
  ),
);

并使用 setState 方法更改 if else 结构中的可见性。

Flutter 如何在特定屏幕中隐藏 bottomnavbar？

Flutter how can i hide bottomnavbar in specific screens?

mobile

android

ios

dart

flutter