100 行代码实现 Flutter 自定义 TabBar

solocoder222

于 2020-09-26 15:02:45 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： flutter TabBar 自定义组件

本文链接：https://blog.csdn.net/solocoder/article/details/108812066

版权

本文档介绍了如何使用100行代码实现Flutter自定义TabBar，包括组件的目标、实现思路、封装过程和使用方法。通过封装，实现了在TabBar上添加取消按钮，以及点击Tab或滑动内容区域实现内容切换和动画效果的功能。

摘要由CSDN通过智能技术生成

Flutter 的确很强大，但美中不足的是生态还有待完善，没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。

由此带来的直接影响是开发效率提不上去，需要耗费大量的时间精力在基础组件的封装上。

官方的 TabBar 不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义 TabBar……

需求目标是：

效果如下图：
在这里插入图片描述

将整个页面分为两部分，上面的 Tab 按钮和下面的内容区域。

为了保持通用性，上面的 Tab 和下面的内容区域都需要让调用者传入，它们都是 Widget 数组

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;
  // 页面集合
  final List<Widg

关注

专栏目录