You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter BottomBar默认首项高亮,如何统一所有项样式?

Flutter BottomNavigationBar 统一项样式解决方案

需求1:所有项都不高亮(取消首项默认高亮)

BottomNavigationBar默认会把currentIndex(默认值为0)对应的项设为选中状态,要实现所有项统一未选中样式,只需:

  • 在BottomNavigationBar组件里显式设置currentIndex: -1(-1是无效索引,不会触发任何项的选中状态)
  • 保留你现有ThemeData的样式配置即可,所有项都会应用未选中样式

示例组件代码片段:

BottomNavigationBar(
  currentIndex: -1, // 关键:设置无效索引取消选中状态
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    // 其他导航项...
  ],
)

需求2:所有项都高亮(统一选中样式)

要让所有项都显示为选中状态的视觉效果,只需把BottomNavigationBarThemeData中选中与未选中状态的样式属性设为完全一致,这样无论是否选中,所有项的样式都相同:

修改后的ThemeData代码:

bottomNavigationBarTheme: BottomNavigationBarThemeData(
  type: BottomNavigationBarType.fixed,
  backgroundColor: getColorFromHex('#9FC039'),
  // 统一图标样式
  selectedIconTheme: IconThemeData(color: Colors.white),
  unselectedIconTheme: IconThemeData(color: Colors.white),
  // 统一文字颜色
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.white,
  // 统一文字样式
  selectedLabelStyle: TextStyle(color: Colors.white, fontFamily: 'Montserrat', fontSize: 14.0),
  unselectedLabelStyle: TextStyle(color: Colors.white, fontFamily: 'Montserrat', fontSize: 14.0),
),

此时无论currentIndex设置为哪个值,所有项都会呈现高亮样式。


内容的提问来源于stack exchange,提问作者cwhisperer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 06:20:21