常用基本属性

属性名含义是否必须
items底部导航栏的子项List是
currentIndex当前显示索引否
onTap底部导航栏的点击事件， Function(int)否
type底部导航栏类型，定义 [BottomNavigationBar] 的布局和行为否
selectedItemColor选中项图标和label的颜色否
unselectedItemColor未选中项图标和label的颜色否
iconSize图标大小否
backgroundColor底部导航栏背景色否
showSelectedLabels是否显示选中项的label否
showUnselectedLabels是否显示未选中项的label否
selectedIconTheme选中项 图标的主题 设置否
unselectedIconTheme选中项 图标的主题 设置否
selectedFontSize选中项 文字大小 设置否
unselectedFontSize未选中项 文字大小 设置否
selectedLabelStyle选中项 文字样式 设置否
unselectedLabelStyle未选中项 文字样式 设置否
mouseCursor当鼠标指针进入或悬停在屏幕上时的光标否
enableFeedback检测到的手势是否应提供声音和/或触觉反馈否

示例

效果一

当选中时图标文字变色，未选中时不显示文字

bottomNavigationBar: BottomNavigationBar(selectedItemColor: Colors.red, // 选中时unselectedItemColor: Colors.black, // 未选中currentIndex: _currentIndex,onTap: (value) {setState(() {_currentIndex = value;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),// ...],),

效果二

显示图标和文字，选中变色

可设置type: BottomNavigationBarType.fixed固定或设置showUnselectedLabels: true

bottomNavigationBar: BottomNavigationBar(selectedItemColor: Colors.red, // 选中时unselectedItemColor: Colors.black, // 未选中type: BottomNavigationBarType.fixed,// 固定currentIndex: _currentIndex,onTap: (value) {setState(() {_currentIndex = value;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),// ...],),

效果三

显示图标和文字，设置背景

type: BottomNavigationBarType.fixed必须与backgroundColor配合使用，背景才生效

bottomNavigationBar: BottomNavigationBar(selectedItemColor: Colors.red, // 选中时unselectedItemColor: Colors.black, // 未选中type: BottomNavigationBarType.fixed,// 固定backgroundColor: Colors.amber,// 背景色currentIndex: _currentIndex,onTap: (value) {setState(() {_currentIndex = value;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),// ...],),

完整示例

class PageWidget extends StatefulWidget {const PageWidget({super.key});@overrideState<PageWidget> createState() => _PageWidgetState();}class _PageWidgetState extends State<PageWidget> {int _currentIndex = 0;Widget _getPage(index) {final List<Widget> _pages = <Widget>[Container(color: Colors.red,child: ElevatedButton(onPressed: () {Navigator.pushNamed(context, '/user-page');},child: const Text('User Page'),)),Container(color: Colors.green,),Container(color: Colors.blue,),Container(color: Colors.yellow,),];return _pages[index];}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Page Widget'),),bottomNavigationBar: BottomNavigationBar(backgroundColor: Colors.amber,type: BottomNavigationBarType.fixed,// showSelectedLabels: true,// showUnselectedLabels: true,selectedItemColor: Colors.red,unselectedItemColor: Colors.black,currentIndex: _currentIndex,onTap: (value) {setState(() {_currentIndex = value;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.business),label: 'Business',),BottomNavigationBarItem(icon: Icon(Icons.school),label: 'School',),BottomNavigationBarItem(icon: Icon(Icons.account_circle),label: 'User',),],),body: _getPage(_currentIndex),);}}