【Flutter 3-1】Flutter进阶教程——底部导航栏BottomNavigationBar使用
作者 | 弗拉德
来源 | 弗拉德(公众号: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
查看,并且可以下载下来运行并体验。
推荐阅读
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。所以为了释放程序员的双手...
弗拉德阅读 4.7k
程序员英语学习指南
动机为什么程序员要学习英语?工作:我们每天接触的代码都是英文的、包括很多技术文档也是英文的学习:最新最前沿的技术最开始都是只有English版本就业:学好英语让你的就业范围扩大到全球,而不只限于国内目标读...
九旬赞 6阅读 636
安卓逆向之破解某成人APP播放次数限制
某成人水果APP非VIP用户存在播放次数限制,每天只能播放3次。超过3次需要购买VIP。 由于过于贫穷,于是抽空,对其安卓APP进行了逆向分析,最终成功破解了其播放次数限制。
悖论赞 3阅读 1.3k评论 3
iOSer 年度总结|晋升的逻辑是什么
2022年是疫情3年的一个“小尾巴”,但它一点也不小,因为它是3年内大家感受最深的一年,也是影响最大的一年。身边同事们换工作、周围见闻都可以印证这个结论。
杭城小刘赞 6阅读 1.8k
这一次,解决Flutter Dialog的各种痛点!
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...
小呆呆666赞 1阅读 3.4k
iOS 健康共享失败如何解决
您要开始与之共享的对象必须已经连同他们的 iCloud 账户邮箱一起保存在您的“通讯录”中(iCloud 账户邮箱即 iCloud 账户绑定的邮箱信息,不是强制要求 @iCloud.com 邮箱)。
岚哲阅读 7.1k
uni-app中安卓包检查更新、新版本下载、下载进度条显示功能实现
如果想要做一个app的话,可以有很多种选择方案,uni-app是其中的一个性价比高一些(坑多一些)的方案。本文记录一下,uni-app打安卓包以后,需要检查并下载更新,且显示进度条的功能。
水冗水孚赞 2阅读 743
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。