Flutter：取消BottomNavigationBar默认高亮项或寻找替代组件

针对你遇到的BottomNavigationBar默认高亮第一项的问题，有两种可行方案，既能满足导航需求，又能保持和其他页面组件的外观一致性：

方案一：修改BottomNavigationBar样式，消除选中高亮 #

直接让BottomNavigationBar的选中状态与未选中状态样式完全一致，这样无论currentIndex设为0还是1，视觉上都不会有高亮效果。具体实现时，统一设置以下属性：

BottomNavigationBar(
  currentIndex: _currentIndex, // 可根据导航逻辑动态设置，初始值设为0也不影响视觉
  selectedItemColor: Colors.grey, // 与未选中项颜色一致
  unselectedItemColor: Colors.grey,
  selectedLabelStyle: TextStyle(
    color: Colors.grey,
    fontSize: 12, // 匹配原有BottomNavigationBar的字体大小
  ),
  unselectedLabelStyle: TextStyle(
    color: Colors.grey,
    fontSize: 12,
  ),
  selectedIconTheme: IconThemeData(color: Colors.grey), // 图标颜色统一
  unselectedIconTheme: IconThemeData(color: Colors.grey),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.arrow_back),
      label: '返回',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.arrow_forward),
      label: '前进',
    ),
  ],
  onTap: (index) {
    if (index == 0) {
      // 执行返回页面状态的逻辑
    } else {
      // 执行前进页面状态的逻辑
    }
    // 可选：如果不需要记录选中状态，这里可以不更新_currentIndex
  },
)

方案二：用BottomAppBar自定义无高亮导航栏 #

如果不想依赖BottomNavigationBar的选中机制，可以用BottomAppBar模拟相同外观的导航栏，内部放置两个独立按钮，完全控制样式：

BottomAppBar(
  color: Theme.of(context).bottomNavigationBarTheme.backgroundColor, // 匹配原有背景色
  elevation: 8, // 匹配原有阴影高度
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      TextButton.icon(
        onPressed: () {
          // 返回逻辑
        },
        icon: Icon(Icons.arrow_back, size: 24), // 匹配原有图标大小
        label: Text('返回', style: TextStyle(fontSize: 12)),
        style: TextButton.styleFrom(
          foregroundColor: Colors.grey, // 统一按钮颜色
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        ),
      ),
      TextButton.icon(
        onPressed: () {
          // 前进逻辑
        },
        icon: Icon(Icons.arrow_forward, size: 24),
        label: Text('前进', style: TextStyle(fontSize: 12)),
        style: TextButton.styleFrom(
          foregroundColor: Colors.grey,
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        ),
      ),
    ],
  ),
)

通过调整color、elevation、字体大小、图标尺寸等参数，可以完全复刻原有BottomNavigationBar的视觉效果，同时避免默认的高亮问题。

内容的提问来源于stack exchange，提问作者Konrad Piszczek