头图

【Flutter 3-1】Flutter进阶教程——底部导航栏BottomNavigationBar使用

作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)

BottomNavigationBar

BottomNavigationBarBottomNavigationBarItem 配合来共同展示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对象分别命名为F1F2F3F4
  • type参数传入的是BottomNavigationBarType.fixed,默认是BottomNavigationBarType.shifting,默认的效果是 只有在选中BottomNavigationBarItem时才会显示文字。设置成BottomNavigationBarType.fixed非选中状态下也会显示文字和图标
  • onTap实现的是一个方法,参数是被点击的当前BottomNavigationBarItem的下标,在这里被点击后调用setState来刷新页面的颜色

效果如下:

2020_01_29_bottom_navigation_bar

日常开发中以上效果基本能满足大多数需求
如果想要自定义下面Icon的样式,可以使用 BottomAppBar

这里也介绍两个不错的库

2020_01_29_bottom_th2

2020_01_29_bottom_th1

想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->bottom_navigation_page.dart查看,并且可以下载下来运行并体验。


公众号

一生只有一个职业:学生

29 声望
6 粉丝
0 条评论
推荐阅读
【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:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6661阅读 3.4k

封面图
iOS 健康共享失败如何解决
您要开始与之共享的对象必须已经连同他们的 iCloud 账户邮箱一起保存在您的“通讯录”中(iCloud 账户邮箱即 iCloud 账户绑定的邮箱信息,不是强制要求 @iCloud.com 邮箱)。

岚哲阅读 7.1k

uni-app中安卓包检查更新、新版本下载、下载进度条显示功能实现
如果想要做一个app的话,可以有很多种选择方案,uni-app是其中的一个性价比高一些(坑多一些)的方案。本文记录一下,uni-app打安卓包以后,需要检查并下载更新,且显示进度条的功能。

水冗水孚2阅读 743

一生只有一个职业:学生

29 声望
6 粉丝
宣传栏