一、简介
BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar 是 Scaffold 组件的参数。
二、BottomNavigationBar 源码
BottomNavigationBar({
Key key,
@required this.items,//底部导航条按钮集合
this.onTap,//点击选中的回调
this.currentIndex = 0,//选中第几个题目的索引值
this.elevation,//阴影
this.type,//风格
Color fixedColor,//选中的颜色
this.backgroundColor,//背景色
this.iconSize = 24.0,//图标的大小
Color selectedItemColor,//选中条目的颜色
this.unselectedItemColor,//未选中条目的颜色
this.selectedIconTheme,//选中图标的样式
this.unselectedIconTheme,//未选中图标的样式
this.selectedFontSize = 14.0,//选中文字的大小
this.unselectedFontSize = 12.0,//未选中文字的大小
this.selectedLabelStyle,//选中文字的样式
this.unselectedLabelStyle,//未选中文字的样式
this.showSelectedLabels = true,//是否显示选中的文字
this.showUnselectedLabels,//是否显示未选中的文字
this.mouseCursor,//
}) : assert(items != null),
assert(items.length >= 2),
assert(
items.every((BottomNavigationBarItem item) => item.title != null) ||
items.every((BottomNavigationBarItem item) => item.label != null),
'Every item must have a non-null title or label',
),
assert(0 <= currentIndex && currentIndex < items.length),
assert(elevation == null || elevation >= 0.0),
assert(iconSize != null && iconSize >= 0.0),
assert(
selectedItemColor == null || fixedColor == null,
'Either selectedItemColor or fixedColor can be specified, but not both'
),
assert(selectedFontSize != null && selectedFontSize >= 0.0),
assert(unselectedFontSize != null && unselectedFontSize >= 0.0),
assert(showSelectedLabels != null),
selectedItemColor = selectedItemColor ?? fixedColor,
super(key: key);
三、BottomNavigationBar 属性介绍
| 属性 | 说明 |
|---|---|
| item | List |
| onTap | 点击选中的回调 |
| currentIndex | 选中第几个索引值 |
| elevation | 阴影 |
| type | 样式 BottomNavigationBarType.fixed BottomNavigationBarType.shifting |
| fixedColor | 选中时颜色（不能和selectedItemColor共存） |
| backgroundColor | 背景色（BottomNavigationBarType.fixed样式有效） |
| iconSize | 图标的大小 |
| selectedItemColor | 选中条目的颜色（不能和fixedColor共存） |
| unselectedItemColor | 未选中条目的颜色 |
| selectedIconTheme | IconThemeData（）选中图标的样式（IconThemeData源码和属性见下方） IconThemeData设置图标的颜色会覆盖fixedColor或selectedItemColor设置的图标颜色 IconThemeData设置图标的大小会覆盖iconSize 设置的图标大小 |
| unselectedIconTheme | IconThemeData（）未选中图标的样式， IconThemeData设置图标的颜色会覆盖unselectedItemColor设置的图标颜色 IconThemeData设置图标的大小会覆盖iconSize 设置的图标大小 |
| selectedFontSize | 选中文字的大小 |
| unselectedFontSize | 未选中文字的大小 |
| selectedLabelStyle | TextStyle()选中文字的样式,设置文字颜色无效，TextStyle()设置文字的大小会覆盖selectedFontSize设置的大小 |
| unselectedLabelStyle | TextStyle()未选中文字的样式,设置文字颜色无效，TextStyle()设置文字的大小会覆盖unselectedFontSize设置文字的大小 |
| showSelectedLabels | 是否显示选中条目的文字 |
| showUnselectedLabels | 是否显示未选中条目的文字 |
四、BottomNavigationBarItem源码
const BottomNavigationBarItem({
@required this.icon,
@Deprecated(
'Use "label" instead, as it allows for an improved text-scaling experience. '
'This feature was deprecated after v1.19.0.'
)
this.title,
this.label,
Widget activeIcon,
this.backgroundColor,
}) : activeIcon = activeIcon ?? icon,
assert(label == null || title == null),
assert(icon != null);
五、BottomNavigationBarItem属性介绍
|属性|说明|
|icon|图标|
|title|标题|
|label|标签|
|backgroundColor|背景色
|activeIcon|选中后的图标
七、IconThemeData源码
const IconThemeData({this.color, double opacity, this.size}) : _opacity = opacity;
七、IconThemeData属性介绍
| 属性 | 说明 |
|---|---|
| color | 图标的颜色 |
| opacity | 透明度 |
| size | 图标的大小 |
八、demo
void main() {
runApp(TestFul());
}
class TestFul extends StatefulWidget {
TestFul({Key key}) : super(key: key);
_TestFulState createState() => _TestFulState();
}
class _TestFulState extends State {
int clickIndex = 0;
List _pageList = [
Tab1(),
Tab2(),
Tab3(),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("BottomNavigationBar学习"),
),
body: _pageList[clickIndex],
bottomNavigationBar: BottomNavigationBar(
//点击条目的监听回调
onTap: (int index) {
setState(() {
clickIndex = index;
});
},
currentIndex: clickIndex,
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.greenAccent,
iconSize: 20,
// fixedColor: Colors.yellow,
selectedItemColor: Colors.yellow,
unselectedItemColor: Colors.black,
selectedIconTheme: IconThemeData(
color: Colors.red,
opacity: 1,
size: 30,
),
unselectedIconTheme:
IconThemeData(color: Colors.deepPurple, opacity: 0.8, size: 20),
selectedFontSize: 2,
unselectedFontSize: 2,
selectedLabelStyle: TextStyle(
color: Colors.purpleAccent,
fontSize: 15,
),
unselectedLabelStyle: TextStyle(
color: Colors.purpleAccent,
fontSize: 10,
),
showSelectedLabels: true,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("查找")),
BottomNavigationBarItem(
activeIcon: Icon(Icons.opacity),
icon: Icon(Icons.home_rounded), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle_sharp), title: Text("添加")),
],
),
),
);
}
}
class Tab1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("我是查找");
}
}
class Tab2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("我是首页");
}
}
class Tab3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("我是添加");
}
}
141402bc6e5504bbeb9f65310978970.png