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