Flutter - 单击底部导航菜单图标 => 选定的图标颜色和文本颜色不会改变

Question

我是flutter的新手，请帮我摆脱这个问题，

问题 -> 单击任何菜单图标后，颜色不变

当盯着应用程序时，图标颜色设置正确，主页图标是默认的，如果我点击扫描或设置图标绿色没有设置图标和文本，

我已经尝试过 BottomNavigationBarItem 的 activeIcon 仍然无法正常工作

这是我的代码，

  class TabNavigationState extends State<ScaffoldTest> {
 int currentTabIndex = 1;
 var tabs = [Home(), Camera(), Settings()];

 onTabbed(index) => {
    setState(() {
      currentTabIndex = index;
    })
  };

@override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.teal,
    leading: IconButton(
        icon: Icon(
          Icons.search,
          color: Colors.white,
        ),
        onPressed: null),
    centerTitle: false,
    actions: <Widget>[
      IconButton(
          icon: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
          color: Colors.white,
          onPressed: () => debugPrint("Icon tabbed")),
      IconButton(
          icon: Icon(
            Icons.save,
            color: Colors.white,
          ),
          color: Colors.white,
          onPressed: () => debugPrint("Icon tabbed")),
    ],
    title: Text(
      "Test",
      style: TextStyle(color: Colors.white),
    ),
  ),
  backgroundColor: Colors.white,
  body: tabs[currentTabIndex],
  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: IconButton(
      icon: Icon(
        Icons.camera,
        color: Colors.white,
      ),
    ),
  ),
  bottomNavigationBar: BottomNavigationBar(
    // backgroundColor: Colors.blueAccent.shade100,
    selectedItemColor: Colors.green,
    unselectedItemColor: Colors.grey,
      showSelectedLabels: true,
    items: [
      BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text(
            "Home",
            textDirection: TextDirection.ltr,
          )),
      BottomNavigationBarItem(
          icon: Icon(Icons.camera),
          title: Text(
            "Scan",
            textDirection: TextDirection.ltr,
          )),
      BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          title: Text(
            "Settings",
            textDirection: TextDirection.ltr,
          ))
    ],
    onTap: onTabbed,
    ),
  );
}

https://i.stack.imgur.com/aGJqG.png

Answer 1

BottomNavigationBar 具有属性currentIndex 可以知道哪个是当前活动选项卡。您需要在 onTabbed 方法中设置它，例如

int _selectedIndex = 0;

void onTabbed(int index) {
  setState(() {
    _selectedIndex = index;
    ...
  });
  ....
}
// And use _selectedIndex in BottomNavigationBar
Widget build(BuildContext context) {
  return Scaffold(
    ...
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex,
    ),
    ...
  );
}