共计 2576 个字符,预计需要花费 7 分钟才能阅读完成。
作者 | 弗拉德
起源 | 弗拉德(公众号:fulade_me)
BottomNavigationBar
BottomNavigationBar
和 BottomNavigationBarItem
配合来独特展现 Flutter 外面的底部状态栏,底部状态栏是在挪动端很重要的控件。
先看一下 BottomNavigationBar
构造方法
BottomNavigationBar({
// key
Key key,
/// BottomNavigationBarItem 数组
@required this.items,
/// 点击事件办法
this.onTap,
/// 以后选中的 元素下标
this.currentIndex = 0,
/// 底部导航栏的 Z 坐标
this.elevation,
/// 默认是 BottomNavigationBarType.shifting 个别咱们应用 BottomNavigationBarType.fixed
this.type,
/// 选中我的项目色彩的值
Color fixedColor,
/// 背景色彩
this.backgroundColor,
/// BottomNavigationBarItem 图标的大小
this.iconSize = 24.0,
/// 选中时图标和文字的色彩
Color selectedItemColor,
/// 未选中时图标和文字的色彩
this.unselectedItemColor,
// 选中时的子 Item 的款式
this.selectedIconTheme,
/// 未选中时的子 Item 的款式
this.unselectedIconTheme,
// 选中时字体大小
this.selectedFontSize = 14.0,
/// 未选中时的字体大小
this.unselectedFontSize = 12.0,
/// 选中的时候的字体款式
this.selectedLabelStyle,
/// 未选中时的字体款式
this.unselectedLabelStyle,
/// 是否为未抉择的 BottomNavigationBarItem 显示标签
this.showSelectedLabels = true,
//// 是否为选定的 BottomNavigationBarItem 显示标签
this.showUnselectedLabels,
/// pc 端或 web 端应用
this.mouseCursor,
})
咱们来做一个点击底部状态栏按钮切换色彩的 Demo
class _BottomNavigationBarDemoPageState
extends State<BottomNavigationBarDemoPage> {
int selectedIndex = 0;
List<Container> containerList = [
Container(color: Colors.red,),
Container(color: Colors.blue,),
Container(color: Colors.yellow,),
Container(color: Colors.green,)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("BottomNavigationBarDemo"),
backgroundColor: Colors.blue,
),
body: containerList[selectedIndex],
bottomNavigationBar: BottomNavigationBar(
/// 这个很重要
type: BottomNavigationBarType.fixed,
currentIndex: selectedIndex,
onTap: (index) {setState(() {selectedIndex = index;});
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(title: Text('F1'),
icon: Icon(Icons.home),
),
BottomNavigationBarItem(title: Text('F2'),
icon: Icon(Icons.book),
),
BottomNavigationBarItem(title: Text('F3'),
icon: Icon(Icons.school),
),
BottomNavigationBarItem(title: Text('F4'),
icon: Icon(Icons.perm_identity),
),
],
),
);
}
}
Scaffold
接管一个BottomNavigationBar
作为bottomNavigationBar
的参数,而后BottomNavigationBar
接管一个items
的数组,这个数组外面传入了 4 个BottomNavigationBarItem
对象别离命名为F1
、F2
、F3
、F4
type
参数传入的是BottomNavigationBarType.fixed
,默认是BottomNavigationBarType.shifting
,默认的成果是 只有在选中BottomNavigationBarItem
时才会显示文字。设置成BottomNavigationBarType.fixed
非选中状态下也会显示文字和图标onTap
实现的是一个办法,参数是被点击的以后BottomNavigationBarItem
的下标,在这里被点击后调用setState
来刷新页面的色彩
成果如下:
日常开发中以上成果根本能满足大多数需要
如果想要自定义上面 Icon 的款式,能够应用 BottomAppBar
这里也介绍两个不错的库
- tab_bar_animation
链接: https://github.com/tunitowen/…
成果如下:
- simpleanimations
链接: https://github.com/TechieBlos…
成果如下:
想体验以上的示例的运行成果,能够到我的 Github 仓库我的项目 flutter_app
->lib
->routes
->bottom_navigation_page.dart
查看,并且能够下载下来运行并体验。
正文完