始终显示底部导航栏

Question

有没有办法在每个页面上显示BottomNavigationBar？ 目前，按下按钮时 BottomNavigationBar 会消失，但我希望即使在路由到新页面时，BottomNavigationBar 也始终显示。以下代码显示了我的 BottomNavigationBar 和我的详细信息页面。

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int currentIndex = 0;
  final screens = const [Home(), Search()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: screens[currentIndex],
        bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: bottomNav,
            unselectedItemColor: Colors.grey,
            selectedFontSize: 12,
            unselectedFontSize: 12,
            currentIndex: currentIndex,
            onTap: (index) => setState(() => currentIndex = index),
            items: const [
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home_filled,
                    size: 28,
                  ),
                  label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.search_rounded,
                    size: 28,
                  ),
                  label: 'Search'),
            ]));
  }
}

我的详情页面：

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: IconButton(
        icon: const Icon(Icons.abc),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => const Page1()));
        },
      )),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
    );
  }
}

Answer 1

好吧，如果所有这些页面（您想要显示此栏的位置）都放在同一个脚手架下，那么它应该显示在每个页面上。这是我通常做的事情：

创建一个列表，其中包含要在其上显示底部导航栏的页面：

List subScreens = [SubScreen1(), SubScreen2(), SubScreen3()]

现在，创建一个基本页面/屏幕，它将像这样呈现这些子屏幕：

return Scaffold(
     bottomNavigationBar: BottomNavigationBar(),
     body: subScreens[stateCounter],
 );

现在使用此 stateCounter 作为 BottomNavigationBar() 的 currentIndex 以及从列表中获取正确的子屏幕。

Answer 2

如果您想在所有页面上显示此导航栏，请不要在其他页面上使用您在 BottomNavBar 中使用的 Scaffold。 因为对于每个新的 Scaffold，您都将其他页面的 BottomNavigationBar 参数设置为空。

Answer 3

您可以使用导航器小部件来实现此目的。检查以下代码： 每个 NavigatorView 创建自己的 Navigator 实例。这允许每个选项卡独立管理其导航堆栈，同时保持 BottomNavigationBar 就位。在每个 PrimaryView 内，页面被推送到其相应 Navigator 的堆栈上。这意味着导航到新页面不会影响 BottomNavigationBar 的可见性。

代码示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const AppView());
}

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

  @override
  State<AppView> createState() => _AppViewState();
}

class _AppViewState extends State<AppView> {
  int route = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: IndexedStack(
            index: route,
            children: const [
              NavigatorView(child: PrimaryView(title: 'view 1')),
              NavigatorView(child: PrimaryView(title: 'view 2')),
              NavigatorView(child: PrimaryView(title: 'view 3')),
            ],
          ),
          bottomNavigationBar: NavigationBar(
            selectedIndex: route,
            onDestinationSelected: (index) {
              setState(() {
                route = index;
              });
            },
            destinations: const [
              NavigationDestination(
                label: '1',
                icon: Icon(Icons.home),
              ),
              NavigationDestination(
                label: '2',
                icon: Icon(Icons.star),
              ),
              NavigationDestination(
                label: '3',
                icon: Icon(Icons.info),
              ),
            ],
          )),
    );
  }
}

class NavigatorView extends StatelessWidget {
  final Widget child;

  const NavigatorView({
    super.key,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (BuildContext context) => child,
        );
      },
    );
  }
}

class PrimaryView extends StatelessWidget {
  final String title;
  const PrimaryView({
    super.key,
    required this.title,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const SecondaryView(),
              ),
            );
          },
          child: const Text('Details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Details'),
      ),
      body: const Center(
        child: Text('Details'),
      ),
    );
  }
}