Flutter 仿掘金之动态Tabbar

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

效果

不多逼逼

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, @r
要在Flutter动态更新TabBar,可以使用TabController。TabController是一个控制TabBarTabBarView的类,它可以让你在TabBar中切换选项卡时更新TabBarView中的内容。以下是一个简单的示例代码: ```dart class MyTabbedPage extends StatefulWidget { const MyTabbedPage({Key? key}) : super(key: key); @override State<MyTabbedPage> createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( bottom: TabBar( controller: _tabController, tabs: const [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ), ), body: TabBarView( controller: _tabController, children: const [ Center(child: Text('Tab 1')), Center(child: Text('Tab 2')), Center(child: Text('Tab 3')), ], ), floatingActionButton: FloatingActionButton( onPressed: () { _tabController.animateTo(1); // 切换到第二个选项卡 }, child: const Icon(Icons.arrow_forward), ), ); } } ``` 在这个示例中,我们创建了一个TabController并将其与TabBarTabBarView一起使用。我们还在Scaffold中添加了一个FloatingActionButton,当用户点击它时,我们使用TabController的animateTo方法将选项卡切换到第二个选项卡。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值