BottomNavigationBar是Flutter的一个底部导航
BottomNavigationBar({
Key key,
@required this.items, 接受一个BottomNavigationBarItem=>(icon默认图标、title底部导航文字、actionIcon激活时候的图标、backgroundColor背景颜色)
this.onTap
,点击跳转到响应的页面 一般和PageController一起使用,
onTap: (index){
_controller.jumpToPage(index);
setState(() {
_currentIndex = index;
});
},
this.currentIndex = 0,当前默认选中的哪一个导航 默认是0
this.elevation = 8.0,高度 默认8.0
BottomNavigationBarType type 底部导航栏的风格 有BottomNavigationBarType.fixed;BottomNavigationBarType.shifting 如果未指定,则 当少于四个项时,它会自动设置为第一个 这两个的区别在于 第一个会显示所有的底部导航文字,第二个选中哪一个才会显示哪一个的导航文字。
Color fixedColor, 选中的颜色
this.backgroundColor, 背景颜色
this.iconSize = 24.0, icon的大小
Color selectedItemColor,选中的颜色
this.unselectedItemColor,未选中的颜色
this.selectedIconTheme = const IconThemeData(), 选中后的自定义Icon
this.unselectedIconTheme = const IconThemeData(),未选中后的自定义Icon
this.selectedFontSize = 14.0,选中的字体大小
this.unselectedFontSize = 12.0, 未选中的字体大小
this.selectedLabelStyle,选中label样式
this.unselectedLabelStyle 未选中label样式,
this.showSelectedLabels = true,选中是否显示文字
bool showUnselectedLabels, 未选中是否显示文字 type为fixed默认为true 为shifting默认为false
}
例子:
return Scaffold(
body: PageView(
children: <Widget>[
HomePage(),
SearchPage(),
TravelPage(),
MyPage(),
],
controller: _controller,
),
//底部导航
bottomNavigationBar: BottomNavigationBar(
//选中后的颜色
selectedItemColor: _activeColor,
//未选中的颜色
unselectedItemColor: _defaultColor,
//当前选中的是哪一个
currentIndex: _currentIndex,
//底下的按钮一直存在
type: BottomNavigationBarType.fixed,
//点击的时候跳转到相应的页面
onTap: (index){
_controller.jumpToPage(index);
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
//默认图标
icon: Icon(
Icons.home,
),
//激活时候的图标
activeIcon: Icon(
Icons.home,
),
title: Text("首页",)
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
),
activeIcon: Icon(
Icons.search,
),
title: Text("搜索",)
),
BottomNavigationBarItem(
icon: Icon(
Icons.camera_alt,
),
activeIcon: Icon(
Icons.camera_alt,
),
title: Text("旅拍",)
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
),
activeIcon: Icon(
Icons.account_circle,
),
title: Text("我的",)
),
],
),
);