【Flutter】底部导航BottomNavigationBar的使用
发布时间
阅读量：
阅读量
常用基本属性
| 属性名 | 含义 | 是否必须 |
|---|---|---|
| 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});
@override
State<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];
}
@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),
);
}
}
全部评论 (0)
还没有任何评论哟~