Flutter系列（五）底部导航详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了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. 使用底部导航

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