行业知识
【Flutter】底部导航BottomNavigationBar的使用
2026-11-03 23:16:43
来源：互联网转载
常用基本属性
| 属性名 | 含义 | 是否必须 |
|---|---|---|
| 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必须与backgroundColindex.php/tags-1038.html" >or配合使用，背景才生效
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}); @override State createState() => _PageWidgetState();}class _PageWidgetState extends State { int _currentIndex = 0; Widget _getPage(index) { final List _pages = [ 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]; } @override Widget 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), ); }}
下一篇：在服务器里怎么删除id?
