如何修复Flutter App中的BottomNavigationBar消失问题

Question

我的底部导航栏出现问题。 问题是每当我导航到另一个页面时，底部导航栏就会消失。

我正在使用以下代码导航到另一个页面：

Navigator.of(context).pushReplacement(MaterialPageRoute(
  builder: (BuildContext context) => WorkoutsPage()
));

这是 BottomBar 的总结部分

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

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;
  static final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    WorkoutsPage(),
    ................
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      //print('Tapped index is: ${_selectedIndex}');
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      bottomNavigationBar: Column(
        children: [
          BottomNavigationBar(
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
            ..................................
            type: BottomNavigationBarType.fixed,
            items: const [
              BottomNavigationBarItem(
                  icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
                  activeIcon: Icon(FluentSystemIcons.ic_fluent_home_filled),
                  label: "Home"),
              BottomNavigationBarItem(
                  icon:
                      Icon(FluentSystemIcons.ic_fluent_clipboard_text_regular),
                  activeIcon:
                      Icon(FluentSystemIcons.ic_fluent_clipboard_text_filled),
                  label: "Plan"),

这是 main.dart

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (context) => _defaultHome,
        '/home': (context) => const BottomBar(),
        '/login': (context) => const LoginPage(),
        '/register': (context) => const RegisterPage(),
      },
    );
  }

我的问题是我在使用时应该怎么做才能保持底栏

Navigator.of(context).pushReplacement(MaterialPageRoute(
  builder: (BuildContext context) => WorkoutsPage()
));

单击提交按钮或其他按钮后

Answer 1

BottomBar是一个页面。 当您使用pushReplacement时，您将移动到另一个没有 BottomBar 的脚手架页面。 另一种方法是将bottomNavigationBar的 Column 小部件变成一个单独的StatefulWidget ，并开始在所有Scaffold页面中传递它。 将selectedIndex保留为全局变量，这样即使您更改到另一条路线，它的值也会保持不变。