从零开始Flutter版微信APP--主页之BottomNavigationBar

以下为授权转载的一盎司科技公众号文章

---

Flutter是谷歌推出的跨平台应用开发框架，包括移动端(Android,iOS等)，桌面端(Windows,Linux,macOS等)，Web端等，目前基本比较完善了，可以用来作为新应用开发的工具了。

接下来，我们将编写一个系列的Flutter实践文章，从零开始用Flutter开发一个类似微信的APP，可能没有那么完善，只是用作示例，仅供参考。

对应Flutter的安装等细节，此处不做详细介绍，可以自行搜索，第一篇直接从底部标签栏BottomNavigationBar开始介绍。

特别说明，示例代码使用了非常流行的一个Flutter状态管理库get，可以极大的简化开发过程，只需要定义StatelessWidget类控件，将状态完全交由get库来管理。同时也支持路由跳转等，包括跨页面传参等，也是一个开发利器，推荐深入学习使用。

示例代码地址：

GitHub地址：https://github.com/iounce/flutter-wechat

Gitee地址：https://gitee.com/iounce_admin/flutter-wechat

环境

• Windows操作系统：Windows10（21H2，19044.1766）

• Android Studio：Giraffe 2022.3.1 Patch 2

• Flutter: 3.13.0

• Dart: 3.1.0

• get: 4.6.6

新建Flutter工程

首先需要在Android Studio安装Flutter插件，然后选择New Flutter Project新建工程：

特别注意，要点击下图中的Flutter选项，设置Flutter工程细节，然后新建工程。如果使用默认选项如New Project，则默认生成的是Java代码实现的Android工程，而不是Flutter工程。

下一步后可以设置工程名，一般命名为xxx_yyy，其中x或y均为小写字母。可以看到支持各种平台，也就是俗称的跨平台了，默认即可。

添加三方库

打开pubspec.yaml配置文件，这里可以添加库文件依赖，以及各种资源文件，如文件，图片，音频等。这里添加get库，库的最新版本可以在官方库网站(https://pub-web.flutter-io.cn/)查找。

修改默认实现

这里主要是使用get库的GetMaterialApp代替默认的MaterialApp，功能上相似，这里也添加了路由选项，initialRoute指定了默认主页。

添加主页controller文件

controller类是get库中的控制类，主要用于控制变量与控件的对应关系。这里主要是页签对应的页面，包括微信、通讯录，发现，我等页面的初步实现，然后就是内部变量的定义。如title是当前页面的标题，index是当前页签序号，page表示当前是哪个页面等，这里obs后缀是get库的特色，类似VueJS中的双向绑定，变量修改后控件自动渲染。

添加主页实现

重点是修改build方法，在这里构造页面控件，这里直接沿用默认代码，添加了body和bottomNavigationBar两个部分的控件，也就是实现底部页签栏以及点击后响应的页面。

这里Obx函数也是get库的特色，用于实现变量和控件的双向绑定，注意使用obs变量的时候，要加value属性来取值。

onTap对应的无名函数用于点击不同页签来切换页面内容，这里是设置obs变量的值，然后会自动切换对应的页面。

BottomNavigationBarItem是某个具体的页签，包含图标和文字，选中activeIcon和未选中icon展示不同的图标。

添加详情页实现

这里详情页，如通讯录，只是简单添加了文字控件，后续再继续完善。

效果图

为了方便起见，这里直接使用浏览器查看效果，可以在Android Studio里面设置，点击绿色箭头运行即可。

效果图如下：

这样，一个简单的模拟的简化版的微信APP界面就出来了，得益于get库的使用，省去了很多代码，譬如StatefulWidget控件的编写，以及setState函数的调用。