美文网首页Flutter
Flutter 使用 asset 资源图片完成 TabBar 图

Flutter 使用 asset 资源图片完成 TabBar 图

作者: 黑键手记 | 来源:发表于2019-02-13 17:08 被阅读40次

    如题,现在使用 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

    谢谢大家关注~

    相关文章

      网友评论

        本文标题:Flutter 使用 asset 资源图片完成 TabBar 图

        本文链接:https://www.haomeiwen.com/subject/bzpdeqtx.html