Flutter 使用 asset 资源图片完成 TabBar 图
2019-02-13 本文已影响40人
黑键手记
如题，现在使用 Flutter 可以使用 Icons 来选择图片，但是Icons内的图片毕竟有限，所以我们肯定会需要用到 UI 为我们设计的图片。
ok，今天的内容就是如何使用 UI 设计好的图进行 TabBar 中的图标展示
还是先上效果图~
那么，开始吧~
一、贴图
切好的图
在项目最外层创建
images文件夹，然后将上方的图片粘贴进去
然后再配置文件
pubspec.yaml中配置好这些图片
二、再创建工程完毕后的示例代码上，做适当修改，我们这里，在
_MyHomePageState类后添加代码
添加此代码的目的是为了我们自定义
TabController，因为Flutter不支持我们使用selector来做图片的切换，所以我们需要监听TabBar的切换状态，然后对图标做相应更改
三、添加上述代码后，请注意看，我们这里定义了一个变量
_currentIndex,我们用这个变量记录TabBar当前切换到了什么位置。（详见图片中注释）
四、然后我们来看一下
关键代码
我们现在不再使用外面封装好的
List，而是在TabBar内部去对tabs进行赋值其中用到了我们上面定义的
记录当前位置的变量_currentIndex
五、然后使用第四步构造的
TabBar
bingo
谢谢大家关注~
