如何修复Flutter应用程序中的BottomNavigationBar消失问题

9gm1akwq  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(210)

我的底部导航栏遇到了问题。问题是每当我导航到另一个页面时,底部导航栏就会消失。
我使用以下代码导航到另一个页面:

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"),

这里是主要的。 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()
));

在点击提交按钮或其他按钮后

os8fio9y

os8fio9y1#

BottomBar是一个页面。使用 pushReplacement 时,您将移动到另一个不是BottomBar的 Scaffold 页面。另一种方法是将 bottomNavigationBar 的列小部件转换为单独的StatefulWidget,并开始在所有 Scaffold 页面中传递它。将 selectedIndex 保留为全局变量,以便即使您更改为另一个路由,其值也会保留。

相关问题