Flutter 使用 asset 资源图片完成 TabBar 图标显示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JerryWu145/article/details/87192129

如题,现在使用 Flutter 可以使用 Icons 来选择图片,但是Icons内的图片毕竟有限,所以我们肯定会需要用到 UI 为我们设计的图片。

ok,今天的内容就是如何使用 UI 设计好的图进行 TabBar 中的图标展示

还是先上效果图~

那么,开始吧~

一、贴图

切好的图

切好的图


在项目最外层创建images文件夹,然后将上方的图片粘贴进去


然后再配置文件pubspec.yaml中配置好这些图片

二、再创建工程完毕后的示例代码上,做适当修改,我们这里,在_MyHomePageState类后添加代码


添加此代码的目的是为了我们自定义TabController,因为Flutter不支持我们使用selector来做图片的切换,所以我们需要监听TabBar的切换状态,然后对图标做相应更改

三、添加上述代码后,请注意看,我们这里定义了一个变量_currentIndex,我们用这个变量记录TabBar当前切换到了什么位置。(详见图片中注释)

四、然后我们来看一下关键代码


我们现在不再使用外面封装好的List,而是在TabBar内部去对tabs进行赋值
其中用到了我们上面定义的记录当前位置的变量_currentIndex

五、然后使用第四步构造的TabBar

bingo

源码地址tag_2_use_asset

谢谢大家关注~

猜你喜欢

转载自blog.csdn.net/JerryWu145/article/details/87192129
今日推荐