Flutter系列（五）底部导航详解

Flutter系列（四）底部导航+顶部导航+图文列表完整代码，如下：

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

目录

一、前言

二、Scaffold组件

三、BottomNavigationBar组件

四、底部导航的具体实现步骤

步骤1. 构建底部导航组件，设置样式

步骤2. 设置底部导航图标和文字

步骤3. 导航页内容

步骤4. 使用底部导航

五、完整代码和工程结构

---

一、前言

        本文主要介绍底部导航 BottomNavigationBar 的实现，和Scaffold组件一些常用的属性

二、Scaffold组件

        在程序中查看组件属性可以点击组件Scaffold查看源码，常用属性的中文释义如下表：

属性	释义	类型
appBar	顶部导航	PreferredSizeWidget
body	底部导航的页面内容	Widget（组件）
bottomNavigationBar	底部导航	BottomNavigationBar
drawer	左侧抽屉菜单	Widget
backgroundColor	背景色	Color

         实现底部导航需要用到 bottomNavigationBar 和 body 两个属性

三、BottomNavigationBar组件

         BottomNavigationBar是flutter官方提供的组件，常用属性的中文释义如下表：

属性	释义	类型
items	图文列表项	List<BottomNavigationBarItem>
currentIndex	当前页索引	int
onTap	点击切换页面	ValueChanged<int>
fixedColor	图标选中时颜色	Color
type	图文样式类型	BottomNavigationBarType
iconSize	图标尺寸	double
selectedFontSize	选中时文字尺寸	double
unselectedFontSize	未选中时文字尺寸	double

         BottomNavigationBarItem 是flutter官方提供的组件，常用属性的中文释义如下表：

属性	释义	类型
icon	图标	Icon
label	文字	String

         Icon 是flutter官方提供的组件，提供了很多常用的图标，图标对应的名称有官方文档，而且支持检索，非常方便，链接如下：Flutter Icon 图标网

四、底部导航的具体实现步骤

步骤1. 构建底部导航组件，设置样式

int _bottomNavigationIndex = 0;  //底部导航页的索引，从第一页开始（比如首页）//底部导航-样式BottomNavigationBar _bottomNavigationBar(){return BottomNavigationBar(items: items(), //底部导航-图文列表currentIndex: _currentIndex, //底部导航页的当前索引onTap: (flag) {setState(() {_currentIndex = flag;  //点击响应，切换到选中图标});}, //onTap 点击切换页面fixedColor: Colors.blue,  //图标选中时的颜色：蓝色type: BottomNavigationBarType.fixed, //设置fixed，当图标数超过3个时不会改变样式iconSize: 20,  //图标大小selectedFontSize: 12.0, //选中时字体大小unselectedFontSize: 12.0,  //未选中时字体大小);}

步骤2. 设置底部导航图标和文字

       底部导航的图标和文字内容相对固定，不经常变更，避免代码嵌套太多，可以移出来封装到一个dart文件里，使代码简洁易读，这里封装到自定义的 bottomNavigationBar.dart 文件

//底部导航-图标和文字定义
List<BottomNavigationBarItem> items(){return [const BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页',),const BottomNavigationBarItem(icon: Icon(Icons.find_in_page),label: '发现',),const BottomNavigationBarItem(icon: Icon(Icons.shop),label: '商城',),const BottomNavigationBarItem(icon: Icon(Icons.local_activity),label: '我的',),];
}

步骤3. 导航页内容

         导航页的内容是app展示信息的核心，布局更为丰富，先封装成函数，具体布局后续再扩展

//底部导航页-切换页面
final pages = [IndexPage(), //首页FindPage(), //发现页ShopPage(), //商城页HomePage()  //个人主页
];

步骤4. 使用底部导航

@overrideWidget build(BuildContext context) {return Scaffold(body: pages[_bottomNavigationIndex], //页面切换bottomNavigationBar: _bottomNavigationBar()  //底部导航);}

五、完整代码和工程结构

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

END...