最近公司项目开发已经到了尾声，我这边也计划用Flutter重新写一遍公司项目，作为公司新技术引入学习，这项目我计划全部用Flutter自带的小部件来开发，不用任何第三方项目，这样做的目的是为了学习新技术，熟悉原汁原味的Flutter自带小部件，当然这个项目也是我们公司所有前端小伙伴和技术开发人员都能来参与进来，也希望大家能够积极参与进来一起学习新技术，为公司存储新技术。

我公司前端现状

作为一个北上广回重庆家乡发展的前端工程师，来分析一下我现在公司前端技术现状，前端技术原本就是一个杂而乱、多而繁的技术。特别是二三线城市技术人员的技术参差不齐，而且技术态度也很凌乱，在这样的一个大环境下想完全一下子改善是很难的，我们公司目前前端分布情况也很紧张，面对业务也很繁琐而多，技术也是想到哪儿用到哪儿，APP分为Android，IOS开发，有后台WEB开发，同时配备了H5混合APP开发，而且还有小程序也是H5来分担，在任务繁琐的眼前，每个开发人员在积极完成交代的任务后，基本无过多时间来学习新的项目，每次的迭代都是为了完成工期而无任何架构代码质量可言，作为公司有自己产品来讲，对技术人员的要求还是很高的，不光是要完成任务，而且还要保证代码质量，空闲还要进行代码重构是非常重要的，如果直接下达重构代码任务是很难进行的，代码没有任何BUG前让开发人员动代码是很有抵触心理的，所以我的安排就是先从人员技术培训开发，后续我这边会安排更多的培训来让大家明白代码质量对于一个有自己产品的公司来讲是非常重要的。让大家明白我们不是在完成任务，我们每一句代码对产品以后能不能走的更远是非常重要的。

接下来安排

最近大家也知道，我更新的频率没有以前多了，是因为我这边最近事情有点多，公司这边有一些人事变动，自己对2020年也做了一些规划，但是我没有忘记我还有一个头条号，没有忘记我还要上来更新文章，因为我还有一堆支持我的粉丝。

接下来我这边会安排定期更新一些Flutter文章，都是原汁原味的Flutter原生API搭建的技术文章,[不忘初心,方得始终],做事情只有不忘记自己最初持守的信念，到最后就一定能获得成功。

Flutter版本的APP底部导航栏选择

底部导航栏大家应该见过很多很多了，手机上的APP用这样的导航方式已经很正常了，最开始也有过很多其他的尝试方式，比如侧滑栏来导航的，生命力最强的导航方式就是底部样式是最久的了，直接打开Flutter官网API，可以很清楚的查看到有如下几个API：

1. CupertinoTabScaffold
2. CupertinoTabView
3. CupertinoTabBar
4. BottomNavigationBar

这几个导航小部件有什么区别吗？怎么选择了？

Flutter CupertinoTabScaffold 实现iOS应用程序的选项卡式的根布局与结构。一个在底部放置标签栏，标签栏之间或后面放置内容的脚手架。

CupertinoTabView具有其自己的导航器状态和历史记录的单个选项卡视图。一个典型的选项卡视图，用作CupertinoTabScaffold 中每个选项卡的内容，可以将多个具有并行导航状态和历史记录的选项卡共存。

CupertinoTabBar iOS样式的底部导航选项卡栏。使用BottomNavigationBarItem显示多个选项卡，其中一个选项卡处于活动状态，默认情况下第一个选项卡。

BottomNavigationBar显示在应用程序底部的材质小部件，用于在少量视图（通常在三到五个之间）中选择。

看上面的介绍，其中有几个是IOS样式风格，然后就是Android样式风格的导航样式，一般作为底部导航选择我们用的比较多的就是「BottomNavigationBar」这个部件了，底部导航一般在3到5个之间，所以我们选择它再合适不过了。

BottomNavigationBar导航部件用法

底部导航栏通常与Scaffold结合使用，我们先看下 BottomNavigationBar 组件的构造函数：

BottomNavigationBar

BottomNavigationBarItem构造函数如下

完成效果图：

总结：

源码就不拿出来了，虽然是公司新技术学习项目，但是整个图标都是用的公司项目图标，所有的网络请求都是用的公司API。暂时分享到这里。欢迎大家点赞，转发，关注，评论。

閱讀更多 技術剛剛好 的文章

關鍵字: 美好，一直在身边 2019科技之光 Android