Flutter 底部导航栏在按钮按下时不改变图标

我想在一些特定的屏幕/页面上使用

BottomNavigationBar

，我不确定我是否做对了。我制作了一个名为

BottomNavBar

的小部件，并在我的页面/屏幕上实现了它。每当我点击时，比如说

Page3

，它就会导航到

Page3

，但所选图标总是在第一个图标按钮上，如下图所示

我想到的是更改为所选屏幕/页面的图标按钮（汽车），在本例中为

page 3

。总之，每当我从底部导航栏选择一个页面时，都应该选择相应的图标按钮，并以蓝色突出显示，如上图所示。下面是

底部导航栏的代码：

import 'package:flutter/material.dart';
import 'screens/page_1.dart';
import 'screens/page_2.dart';
import 'screens/page_3.dart';
import 'screens/page_4.dart';
import 'screens/page_5.dart';


class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Colors.white,
      currentIndex: _selectedIndex, // this will be set when a new tab is tapped
      showUnselectedLabels: true,
      onTap: (int index) {
        setState(() {
          _selectedIndex = index;
        });
        switch (index) {
          case 0:
            Navigator.pushNamed(context, Page1.id);
            break;
          case 1:
            Navigator.pushNamed(context, Page2.id);
            break;
          case 2:
            Navigator.pushNamed(context, Page3.id);
            break;
          case 3:
            Navigator.pushNamed(context, Page4.id);
            break;
          case 4:
            Navigator.pushNamed(context, Page5.id);
            break;
        }
      },
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.dashboard),
          label: "Page 1",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.work), 
          label: "Page 2",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.directions_car),
          label: "Page 3",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.supervised_user_circle),
          label: "Page 4",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          label: "Page 5",
        ),
      ],
    );
  }
}


这是不是一个好方法？感谢您的帮助，提前谢谢
 在每个页面上都有一个
bottomNavigationBar:BottomNavBar（）
，当您从一页导航到另一页时，它会被重置。所以currentIndex总是0

2种解决方案：


为BottomNavBar小部件提供索引
不要导航到页面，而是加载小部件，如以下示例所示：


在每一页上都有一个
bottomNavigationBar:BottomNavBar（）
，当您从一页导航到另一页时，它会被重置。所以currentIndex总是0

2种解决方案：


为BottomNavBar小部件提供索引
不要导航到页面，而是加载小部件，如以下示例所示：


我同意@BabC的观点，即问题与在页面之间移动时重置多个导航栏有关。
下面是一个关于如何正确使用底部导航条的好指南
我同意@BabC的观点，即问题与在页面之间移动时重置多个导航栏有关。
下面是一个关于如何正确使用底部导航条的好指南
是的，你是对的，我的错误是，
\u currentInex
总是重置，因为我已经在所有页面上导入了它。我试过你的解决方案，效果很好。再次感谢！是的，你是对的，我的错误是，
\u currentInex
总是重置，因为我已经在所有页面上导入了它。我试过你的解决方案，效果很好。再次感谢！是的，我刚刚尝试了@BabC solution，效果很好。谢谢你的帮助。是的，我刚刚尝试了@BabC解决方案，效果很好。谢谢你的帮助。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'components/bottom_navigation_bar.dart';

class Page1 extends StatelessWidget {
  static const String id = 'page_1';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(
          color: Colors.grey[600],
        ),
      ),
      body: SafeArea(
          child: Container(
            child: Text('THIS IS PAGE 1'),
        ),
      ),
/// Here is where have I implemented the widget
      bottomNavigationBar: BottomNavBar(),
    );
  }
}


      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(