一、BottomNavigationBar 组件

---

BottomNavigationBar 组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ;

下面是 BottomNavigationBar 组件的构造函数源码 , 该构造函数的可选参数列表就是可以设置的字段属性 ;

class BottomNavigationBar extends StatefulWidget {/// Creates a bottom navigation bar which is typically used as a/// [Scaffold]'s [Scaffold.bottomNavigationBar] argument.////// The length of [items] must be at least two and each item's icon and title/// must not be null.////// If [type] is null then [BottomNavigationBarType.fixed] is used when there/// are two or three [items], [BottomNavigationBarType.shifting] otherwise.////// The [iconSize], [selectedFontSize], [unselectedFontSize], and [elevation]/// arguments must be non-null and non-negative.////// If [selectedLabelStyle.color] and [unselectedLabelStyle.color] values/// are non-null, they will be used instead of [selectedItemColor] and/// [unselectedItemColor].////// If custom [IconThemData]s are used, you must provide both/// [selectedIconTheme] and [unselectedIconTheme], and both/// [IconThemeData.color] and [IconThemeData.size] must be set.////// If both [selectedLabelStyle.fontSize] and [selectedFontSize] are set,/// [selectedLabelStyle.fontSize] will be used.////// Only one of [selectedItemColor] and [fixedColor] can be specified. The/// former is preferred, [fixedColor] only exists for the sake of/// backwards compatibility.////// The [showSelectedLabels] argument must not be non-null.////// The [showUnselectedLabels] argument defaults to `true` if [type] is/// [BottomNavigationBarType.fixed] and `false` if [type] is/// [BottomNavigationBarType.shifting].BottomNavigationBar({Key key,@required this.items,// 当前的若干 BottomNavigationBarItem 组件this.onTap,this.currentIndex = 0,// 当前选中条目 this.elevation = 8.0,BottomNavigationBarType type,Color fixedColor,this.backgroundColor,this.iconSize = 24.0,Color selectedItemColor,this.unselectedItemColor,this.selectedIconTheme = const IconThemeData(),this.unselectedIconTheme = const IconThemeData(),this.selectedFontSize = 14.0,this.unselectedFontSize = 12.0,this.selectedLabelStyle,this.unselectedLabelStyle,this.showSelectedLabels = true,bool showUnselectedLabels,})
}

二、BottomNavigationBarItem 组件

---

BottomNavigationBarItem 组件是 BottomNavigationBar 的 items 字段值 , 可以给该 items 字段设置多个 BottomNavigationBarItem 组件 ;

BottomNavigationBarItem 组件常用设置 :

• 默认状态图标 : icon ;
• 图标下显示的标题 : title ;
• 激活状态的图标 : activeIcon ;
• 背景颜色 : backgroundColor ;

BottomNavigationBarItem 组件构造函数源码 :

class BottomNavigationBarItem {/// Creates an item that is used with [BottomNavigationBar.items].////// The argument [icon] should not be null and the argument [title] should not be null when used in a Material Design's [BottomNavigationBar].const BottomNavigationBarItem({@required this.icon,  // 默认状态图标this.title,    // 图标下显示的标题Widget activeIcon,   // 激活状态的图标 this.backgroundColor,    // 背景颜色}) : activeIcon = activeIcon ?? icon,assert(icon != null);
}

三、BottomNavigationBar 底部导航栏代码示例

---

代码示例 :

        // 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),

完整代码示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[],),),),);}
}

运行效果 :

四、BottomNavigationBar 底部导航栏选中状态切换代码示例

---

BottomNavigationBar 底部导航栏每个 BottomNavigationBarItem 都有一个选中状态 , 通过 StatefulWidget 可以改变页面状态 ;

设置一个成员变量 , 标识当前选中的索引值 ;

  /// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;

将 BottomNavigationBar 组件的 currentIndex 设置为 _currentSelectedIndex 成员变量 ;

        // 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,)

设置 BottomNavigationBar 组件的 onTap 回调事件 , 传入一个匿名回调函数 , 在该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡 ;

        // 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},)

完整代码示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// Container 容器使用body: Container(// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[],),),),);}
}

运行效果 :

五、BottomNavigationBar 底部导航栏切换选项卡界面

---

BottomNavigationBar 底部导航栏的 onTap 回调方法中 , 设置当前选中的选项卡索引 , 根据该索引值修改 Scaffold 组件的 body 对应组件 , 如果选项卡索引为 0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件 1 ;

设置 body 字段值时 , 根据当前的被中选的选项卡索引值 , 判断应该显示哪个组件 ;

body: _currentSelectedIndex == 0 ? 组件0 : 组件1 ,

组件 0 :

        Container( // 对应底部导航栏主界面选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡")],),)

组件 1 :

        Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符

完整代码 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: 'StatefulWidgetPage 组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('StatefulWidgetPage 组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// Container 容器使用body:_currentSelectedIndex == 0 ?Container( // 对应底部导航栏主界面选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡")],),):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}
}

运行效果 :

六、 相关资源

---

参考资料 :

• Flutter 官网 : https://flutter.dev/
• Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社区 : https://flutter.cn/
• Flutter 实用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文档 : https://dart.cn/
• Dart 开发者官网 : https://api.dart.dev/
• Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )

• 博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )相关推荐

1. 【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

   文章目录 一.Scaffold 组件 二.底部导航栏整体架构 三.BottomNavigationBar 底部导航栏 四.BottomNavigationBarItem 导航栏条目 五.PageVie ...

2. Flutter 凸起效果底部导航栏一

   大多app中都会带有底部导航栏,系统默认自带的导航条不够新颖.今天我们改造一下导航条,将中间的按钮起到凸起的效果,特别有的app,中间常用扫一扫功能. Flutter为我们提供了一个控件BottomN ...

3. 分分钟实现底部导航栏：BottomNavigationBar快速集成

   分分钟实现底部导航栏:BottomNavigationBar快速集成 github地址(完整Demo下载) github.com/Ashok-Varma- 一.简介 导航栏布局基本很多app都会用到, ...

4. 底部导航栏使用BottomNavigationBar

   1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...

5. 【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

   文章目录 一.BottomNavigationBar 底部导航栏 二.PageView 滑动页面 三.BottomNavigationBar 与 PageView 关联 四.完整代码示例 1.核心导航 ...

6. ios底部栏设计规范_设计干货：底部导航栏规范设计总结

   本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 本文翻译了 Material Design 规范中对底部导航的规范总结,希望可以带给你更多帮助. 备注 ...

7. 第一次原型分享——墨刀之底部导航栏

   墨刀与Axure各有优缺点 墨刀简单,容易上手,但可修改性较差. 用Axure设计原型时,每个零部件都需要自己一个一个设计,较为灵活,但做出的原型分享较为困难. 今天给大家用墨刀讲解一个组件制作--底 ...

8. Flutter学习日记之底部导航栏BottomNavigationBar组件的使用

   本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址 大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...

9. Flutter底部导航栏BottomNavigationBar页面状态保持解决方案

   网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 一行代代码置灰应用?对就是这么干 在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...

最新文章

1. uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
2. IdentityServer4关于多客户端和API的最佳实践【含多类型客户端和API资源，以及客户端分组实践】【中】...
3. Oracle-01033错误处理
4. yii2 mysql gone away,yii2 console MySQL server
5. syslog(),closelog()与openlog()--日志操作函数
6. linux 文本编辑命令grep sed awk
7. 路灯智能控制系统_在plc的智能路灯控制系统设计，你必须清楚
8. The directory '*' or its parent directory is not owned by the current user
9. mysql-零基础安装
10. 《JavaScript机器人编程指南》——1.2　NodeBot是什么，基本词汇还有哪些
11. 解决： ubuntu18.04没有网络直连
12. poj3614(Sunscreen)优先队列+贪心
13. 事业单位计算机技术岗工资,事业单位待遇，是管理岗好还是技术岗好？
14. 路由器和交换机的区别
15. 关于Spring Security框架 关于单点登录sso
16. 十六进制转十进制数算法
17. [CF549F/51nod1472]Yura and Developers
18. 飞天政务开放体系：数据为中心的云上政务平台与创新生态
19. redis __实现发布订阅
20. C++11中thread_local的使用

热门文章

1. 使用PostSharp开始AOP
2. Documentum中关于日期时间类型字段的特殊处理
3. 别被布线“老思想”拌倒
4. 关于在本地idea当中提交spark代码到远程的错误总结（第二篇）
5. 硬链接、软链接和inode
6. AS3.0函数定义的方法
7. jQuery Alert Dialogs (Alert, Confirm, Prompt Replacements)(翻译)
8. Tuple解决在视图中通过razor获取控制器传递给视图的匿名对象的报错问题
9. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理...
10. ios 缺少合规证明