Flutter 仿掘金之动态Tabbar

最新推荐文章于 2025-05-29 10:21:46 发布

jlanglang

最新推荐文章于 2025-05-29 10:21:46 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter Tabbar

本文链接：https://blog.youkuaiyun.com/jlanglang/article/details/90547452

本文介绍了如何在Flutter中创建动态Tabbar，通过结合TabBarView、DefaultTabController和TabController实现。强调了TabController在接收帧刷新通知中的作用，并提供了一种使用本地缓存动态创建Tabbar的方法。同时提醒在实现过程中需要注意TabController的重新创建和Tabbar在AppBar的位置设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

不多逼逼

Tabbar

先看Tabbar的参数

const TabBar({
    Key key,
    @required this.tabs, // item
    this.controller, //控制器
    this.isScrollable = false, //是否可以滑动
    this.indicatorColor, //指示器的颜色
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,//自定义指示器
    this.indicatorSize,
    this.labelColor, // 选中文字颜色
    this.labelStyle, // 
    this.labelPadding, // 文字的内边距
    this.unselectedLabelColor, // 未选中文字颜色
    this.unselectedLabelStyle,
    this.dragStartBehavior = DragStartBehavior.start, 
    this.onTap,// 点击事件
  })

TabBarView

 const TabBarView({
    Key key,
    @required this.children, // 每页的view
    this.controller, // 控制器
    this.physics,
    this.dragStartBehavior = DragStartBehavior.start,
  })

好了,这两个必须关联起来用. 不然会报错

DefaultTabController

这个是一个无状态的控制器,很简单.但是要做成动态Tabbar的话,不能用这个.

TabController

也很简单.

 TabController({ int initialIndex = 0, @required this.length, @required TickerProvide

最低0.47元/天解锁文章

200万优质内容无限畅学