1 实现通用App底部导航 Tab 组件（Flutter）

不知到大家在使用App的时候，一般App首页的UI入口通常交互方式就是下面有4个底部导航按钮，它的好处就是让跟用户产生良好交互行为，按照自己喜好去快速进入相应功能快速入口。

那么话不多说，我们开始来详细描述通用通用App底部导航 Tab实现过程：

首先先看一下底部导航显示的效果：

1  打开AS的IDE开始创建1个flutter工程，项目名称myJdshop

创建项目

2 将项目初始化代码删掉，重写项目MyApp，添加appbar+body（进行测试页面)

测试代码

3 创建底部导航栏bottomNavigationBar

4个bottomNavigationBarItem+并实现相应的回调函数+引用相应成员变量，onTap函数实现底部导航点击，并调用setState刷新当前的页面

type: BottomNavigationBarType.fixed---当底部导航超过2个button的时候需要加BottomNavigationBarType.fixed,fixedColor

4 创建Tabs.dart文件，实现底部导航UI组件抽离，并在main.dart的home组件进行测试

tab组件抽离封装底部导航

5 实现body组件，创建4个页面主页 分类 购物车 我的

创建4个页面主页、分类、购物车、我的，可以都继承stlessWidget，做测试用

4个模块文件创建

赋值给Tab组件body组件并进行测试

pageList赋值给body组件

6 在main.dart的MyApp跟组件测试

tabs测试

总结：

1 以上就是用flutter实现通用App底部导航 Tab，回顾移动端发展历史，自从触摸屏手机出现的时候，这种交互模式已经用了10多年了。这种交互模式也是来源于web端的交互模式。

2 以前用原生写这种交互模式需要时间也很长，也需要自己封装。但是flutter现在不用自己封装，提供了丰富的UI框架，而且实现多端平台的UI方式，所以这样既提高了开发效率，也节省了人力成本。所以未来的开发模式基本上是原生和flutter混合开过渡到最后flutter平台实现All in one的多个平台研发模式。

3 其实仔细分析它的底层就是调用原生的Android和iOS的UI的API实现底部导航，只不过它自己封装了一层。

写到最后：

对于未来的新技术，我们要采取拥抱的态度去面对它。