Flutter 仿掘金之动态Tabbar

最新推荐文章于 2024-08-13 10:51:12 发布
最新推荐文章于 2024-08-13 10:51:12 发布
阅读量6k 收藏 3
点赞数
分类专栏： Flutter 文章标签： Flutter Tabbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jlanglang/article/details/90547452
版权
本文介绍了如何在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
最低0.47元/天 解锁文章
jlanglang
关注
专栏目录
Flutter动态添加TabBarView
AppBlog.CN全栈架构
05-07 501
原理：动态更新TabController状态。
关于flutter TabBar 接口请求生成tab的问题
qq_19764133的博客
01-26 1934
最近一直在学习flutter，用TarBar的时候发现的问题，不知道这是不是google的bug，如果有更好的办法请告知，相互学习，谢谢。        搞了好久就是报这个错：  The following RangeError was thrown building TabBar(dirty, state: _TabBarState#27cf7):                Range...
Flutter动态加载TabBar
徐代龙的技术专栏
08-09 8425
效果图： 这里主要是用了TabController这个controller，而不是用的默认的DefaultTabController，TabBar跟TabBarView必须关联起来，否则会报错。我这个上面的代码改得还有点多，因为还加入了listview，各位看官就暂时凑合着看吧。 源码贴出来 源码： import 'dart:convert'; import 'package:flutter/...
Flutter TabBar自定义指示器
最新发布
m0_72010625的博客
08-13 393
由于使用了isScrollable: true，导致标签左侧默认有一块很宽的边距，以及整个TabBar底部都有一条分割线。首先先去除左侧边距和底部分割线，在TabBar中加上这两条属性。然后就是自定义指示器，让它显示固定的宽度和圆角，这里参考了。新建一个dart文件，将代码复制进去，可以直接使用。这里直接贴代码，具体实现步骤看上篇博客~
FLUTTER动态渲染 顶部tabbar
weixin_43453916的博客
06-18 761
import 'package:flutter/material.dart'; //class From extends StatelessWidget { // @override // Widget build(BuildContext context) { // return Scaffold( // body: Text('322333'), // ); // } //} class From extends StatefulWidget { From({Key
flutter 动态添加tabBar后点击tab TabBarView不切换
qq_34881609的博客
08-30 1665
解决方案： _tabController = TabController(initialIndex: _tabList.length>1?1:0, length: _tabList.length, vsync: this); 源码： The `initialIndex` must be valid given [length] and must not be null. If /// [length] is zero, then `initialIndex` must be 0 (the
Flutter之TabBar篇
weixin_43031192的博客
04-09 2744
使用方法： 第二种采用的三方插件 第三种自定义
Flutter 玩转微信——微信首页
u011581932的博客
06-19 1526
概述 这篇文章主要介绍的是如何利用Flutter搭建微信首页的功能，详细讲述该功能实现过程中所运用到的技术，以及遇到问题后如何解决的心得体会。该功能虽然粗看时看似简单，但是细作时发现其功能逻辑复杂，内部细节处理较高，当然其中涵盖了Flutter中大部分知识点，笔者相信初学者通过实现该功能后，定会对所学的Flutter知识的掌握上更上一层楼。 笔者此次主要实现了微信首页的以下几个功能点： 消息的侧滑删除 下拉显示小程序 点击导航栏 + 按钮，弹出菜单栏 点击搜索框，弹出搜索页 笔者希望初学者通
Flutter Candies 一桶天下
weixin_43901866的博客
07-10 628
Flutter Candies 介绍 这是一个集合了Flutter开发中常用的组件/插件????的全家桶，大家可以很方便的集成到自己的项目当中，下面我按照作者来介绍Flutter Candies 的各个项目。篇幅会有点长，请准备好瓜子汽水坐好，开车了，滴滴滴滴滴。 AlexV525 从开始在群里提需求，到可以在群里解答问题 ；从一个养鱼专业的学生，到入行Flutter岗位工作。4月份入群到现在，看到了他的变化，也看到????组织的意义。入坑之后就住在了Github上面。 OpenJMU校园应用 精美的校园
ViewPager+Fragment滑动页面，tabbar跟着实时滑动
07-29
ViewPager+Fragment滑动页面，tabbar跟着实时滑动
Flutter bottomNavigationBar切换widget页面后重复创建widget的问题
米小豆的博客
04-11 6041
问题描述：使用bottomNavigationBar +pageView切换页面，切换第二个页面后再次切换第一个页面，发现重复创建触发了网路请求，好坑！ Widget build(BuildContext context) { return Scaffold( body: PageView.builder( controller: _pageControl...
Flutter创建TabBar
Gamin
11-29 686
一般UI设计的图会带渐变色之类的，应该保持图片的原状，不能随便就给改成纯色。// 导入Flutter Material组件库// 确保Flutter绑定到框架初始化// 运行应用// 创建一个无状态的组件MyApp// 构造函数，接收一个Key@override// 重写build方法，构建UIdebugShowCheckedModeBanner: false, // 禁用右上角的Debug标志// 设置应用主题// 设置TabBar主题。
flutter 动态TabBar 用singleTickerProviderStateMixin报错
渣女园的博客
02-26 1932
flutter 动态TabBar 用singleTickerProviderStateMixin报错
Flutter 之 TabBar & TabBarView
augfun的博客
11-18 1143
直接上图上代码，代码部分有注释，莫有的自己百度（留言也可以）； 效果图.png class TestDemo extends StatefulWidget { @override State<StatefulWidget> createState() { return _TestDemoState(); } } class _TestDemoState extends State<TestDemo> with SingleTickerProvi
Flutter - 动画使用及自定义动画组件（tabbar跳动动画或文字抖动）
iotjin的专栏
04-13 1099
动画是指将一系列静态图像连续播放，形成一种视觉上的动态效果。在Flutter中，动画是通过对属性进行插值计算，逐步改变属性值，从而实现动态效果的。在Flutter中，动画是通过一系列的动画对象和控制器来实现的。动画对象通常是一个值的插值器，可以将一个值从一个范围映射到另一个范围。Flutter中提供了多种类型的动画对象，如Tween、Curve等。动画控制器则用于控制动画的状态和进度。控制器可以启动、停止、反转动画，并且可以监听动画的状态变化和进度变化。
flutter 动态创建table
tianhongfan10106的专栏
11-11 2273
//创建table Widget _buildTableView(IncomeDetailBean item) { double tabWidth = (Screen.width - 24) / 5; //每一列平分屏幕 return Container( padding: EdgeInsets.only(top: 10, bottom: 10), child: Table( columnWidths: { //列宽 0: FixedColumnWidth(tabWid.
【Flutter】AppBar、TabBar和TabBarView
一以贯之的努力 不得懈怠的人生
05-26 1281
介绍了AppBar、TabBar和TabBarView组件。
flutter TabBar动态更新
11-26
要在Flutter中动态更新TabBar，可以使用TabController。TabController是一个控制TabBar和TabBarView的类，它可以让你在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并将其与TabBar和TabBarView一起使用。我们还在Scaffold中添加了一个FloatingActionButton，当用户点击它时，我们使用TabController的animateTo方法将选项卡切换到第二个选项卡。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值