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

摸金青年v

已于 2023-04-09 11:13:26 修改

阅读量1.8k

点赞数 2

分类专栏： flutter 文章标签： flutter

于 2023-04-09 10:47:57 首次发布

本文链接：https://blog.csdn.net/sinat_41144773/article/details/130037850

版权

flutter 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

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

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

一、前言

二、Scaffold组件

三、BottomNavigationBar组件

一、前言

本文主要介绍底部导航 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()  //底部导航
    );
  }