Flutter BottomBar默认首项高亮,如何统一所有项样式?
需求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
相关产品推荐
相关产品推荐

