石家庄网站建设推广电话北京三里屯
Flutter系列（四）底部导航+顶部导航+图文列表完整代码，如下：
Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客
目录
一、前言
二、Scaffold组件
四、底部导航的具体实现步骤
步骤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...