FLUTTER BottomNavigationBar 第一项始终处于激活状态

Question

我正在修改应用程序布局并使用导航栏，但无论我是否按下它，我的第一个项目始终处于激活状态。有什么想法吗？

我的标签在第一个项目没有显示后也是如此。

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
        ),

      bottomNavigationBar: BottomAppBar(
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
       // color: Colors.black,
        child:
            BottomNavigationBar(
          elevation: 50,
          //backgroundColor: Colors.black,
          unselectedItemColor: Colors.black,
          selectedItemColor: Colors.green,
          items: [
//the first one is always activated
            BottomNavigationBarItem(
              icon: Icon(Icons.accessibility_new),
              label: ("Lo"),
              activeIcon: Icon(Icons.book),
             //IF I add background color here it will fill the entire bar
              //backgroundColor: Colors.green,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book),
              label: ("Ed"),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_time),
                label: ("Pi"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.accessible_sharp),
              label: ("ac"),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

使用一个变量来保存当前选择的索引

int selectedIndex = 0;
// ....

bottomNavigationBar: BottomAppBar(
  notchMargin: 5,
  child: BottomNavigationBar(
    unselectedItemColor: Colors.black,
    selectedItemColor: Colors.green,
    onTap: (index) {
      setState(() {
        selectedIndex = index;
      });
    },
    currentIndex: selectedIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.accessibility_new),
        label: ("Lo"),
        activeIcon: Icon(Icons.book),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: ("Ed"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.access_time),
        label: ("Pi"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.accessible_sharp),
        label: ("ac"),
      ),
    ],
  ),
),

Answer 2

为了使（未选择的）标签正确显示，请尝试将此行添加到您的 BottomNavigationBar：

showUnselectedLabels: true,

如果这不起作用，可能是您未选择的标签与背景颜色相同。

祝你项目顺利 ;)。
-塞德里克

FLUTTER BottomNavigationBar 第一项始终处于激活状态

FLUTTER BottomNavigationBar first item is always activated

navigationbar

flutter