不知到大家在使用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实现底部导航，只不过它自己封装了一层。
写到最后：
对于未来的新技术，我们要采取拥抱的态度去面对它。
网友评论