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

【问题标题】：FLUTTER BottomNavigationBar first item is always activatedFLUTTER BottomNavigationBar 第一项始终处于激活状态
【发布时间】：2021-01-17 09:45:40
【问题描述】：

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

我的标签在第一项之后也没有显示。

  @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"),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter navigationbar

【解决方案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"),
      ),
    ],
  ),
),

【讨论】：

我已经有一个变量并且导航确实有效，但始终选择第一项。有什么想法吗？

【解决方案2】：

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

showUnselectedLabels: true,

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

祝你的项目好运；）。
-塞德里克

【讨论】：