首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么在颤动中使用TabBar丢失了TabController

在颤动(shaking)中使用TabBar可能会导致TabController丢失的原因是因为颤动操作会重新加载页面,而TabController通常是在页面初始化时创建的。当页面重新加载时,TabController也会被重新创建,导致之前的TabController实例丢失。

为了解决这个问题,可以考虑将TabController的创建和初始化放在一个持久的状态管理器中,例如使用Provider或GetX等状态管理库。这样,在页面重新加载时,可以通过状态管理器来获取之前创建的TabController实例,避免丢失。

另外,还可以通过在页面销毁时手动保存TabController的状态,并在页面重新加载时恢复状态。可以使用TabController的addListener方法监听TabController的状态变化,并在页面销毁时调用removeListener方法取消监听。在页面重新加载时,可以通过之前保存的状态来创建TabController实例,并将其传递给TabBar。

总结起来,在颤动中使用TabBar丢失TabController的解决方案包括:

  1. 将TabController的创建和初始化放在一个持久的状态管理器中,避免丢失。
  2. 在页面销毁时手动保存TabController的状态,并在页面重新加载时恢复状态。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,无法提供相关链接。但可以参考腾讯云的文档和官方网站,了解他们提供的云计算解决方案和产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter的AppBar、TabBarTabController——顶部切换栏是如何实现的

leading,导航栏最左侧(标题前面)显示的组件,首页通常显示应用的logo,在其他页面通常显示为返回按钮 actions,导航栏右侧(标题后面)显示的组件组,通常使用IconButton来表示...2,TabBar的tabs的Tab元素,以及TabBarView的children的页面元素是一一对应的,对应好了之后就可以页面对应展示。...但是有些时候,我们会遇到不可自定义原始的AppBar的场景,而我们又想实现顶部TabBar的效果,此时我们就可以页面再加一个Scaffold组件,然后这样就有两个AppBar。...好,现在我们已经知道该如何利用AppBar和TabBar来实现顶部Tabbar的视觉效果本文的最后,我们来了解一下如何个性化设置顶部TabBar导航条。...3,页面的state(_TabBarControllerPageState)要声明并初始化一个TabController实例 (_tabController) 4, TabBar 和 TabBarView

9.4K20

【Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航栏

TabBar 绘制过程,多个子 Tab 通过 SingleChildScrollView 存放,最简单的方式, SingleChildScrollView 外添加可以设置对齐方式的 Container...& endIcon 两个属性,最终 return tabBar 时进行判断是否展示添加到导航栏;而是否添加点击事件可以通过添加 Widget 时进行处理; Widget tabBar = CustomPaint...Container() ]); return tabBar; 案例尝试 和尚尝试 isScrollable 是否可滑动两种状态下,导航栏添加左右两个固定位图标; _tabBar05(type...小扩展 和尚在了解 TabBar 源码过程,简单学习 Tab Item 以及对应 indicator 标签指标的绘制及对应的滑动过程;其中 TabBar 绘制过程中会用到 PreferredSizeWidget...小组件; PreferredSizeWidget 小组件作为一个抽象接口类,主要用于返回该小部件不受其他限制的情况下设定的较理想的大小;若没有进行约束高度,则会使用 PreferredSizeWidget

2K90

【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)

和尚今天学习一下常用的 TabBar 导航栏使用方法; 源码分析 const TabBar({ Key key, @required this.tabs,...与 TabBarView 是配对使用的,其对应的 Tab 数量必须相同;其中 TabBar 中提供众多相关指示器属性,且 TabBar 与 TabBarView 上下拖拽方式区分设置,互不影响; 案例尝试...TabBar tabs 为顶部标签列表;controller 为标签控制器,若未提供此标签控制器,可使用系统 DefaultTabController 控制器;和尚创建一个基本的 TabBar 样式,...其中 TabBar 与 TabBarView 共用一个 TabController 控制器,且对应数量一致; // 设置 TabController class _TabBarPageState extends...小扩展 TabBar 一般使用在 AppBar bottom ,上面会有 Title 层,和尚尝试,TabBar 也可以直接应用在 Title 处; Scaffold(appBar: AppBar(

1.4K31

Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

本节使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果undefined 【x1】微信公众号的每日提醒 随时随记...TabBarView 装载三个 Widget ,当然实际应用场景,你也可以使用独立的 StatefulWidget 来使用,代码如下: TabBarView buildTabBarView()...TabController ,是 初始化函数 initState 创建的,代码如下: TabController tabController; @override void initState...() { super.initState(); ///这里的 3 代表有三个子 Item ///应用到 TabBarView ,对应其中3个子Item ///应用到 TabBar,对应其中...与 TabBar 的联动的,当然 TabBar是配置 SliverAppBar 的 bottom 属性下,通过 buildTabBar 方法来封装的, 代码如下: TabBar buildTabBar

2.6K11

13.Flutter学习之路AppBar实现顶部tab

AppBar 属性 描述 leading 标题前面显示一个控件,首页通常显示引用logo,在其他界面则是返回键 title 标题,通常显示当前页面的标题文字,可以放组件 actions 通常使用IconButton...来表示,可以放按钮组 bottom 通常会放TabBar标题下面显示一个Tab导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle...标题是否居中显示 TabBar 属性 描述 tabs 显示的标签内容,一般使用Tab对象,也可以是其他Widget controller TabController(控制器)对象 isScrollable...我们将AppBarTab放入我们的TabBar组件。...实现顶部tab切换'), bottom: TabBar( controller: _tabController, //此处必须填入 tabs: <

1.3K10

FlutterComponent最佳实践之TabbarIndicator

关于TabBar的基本使用,我这里就不讲解了,不熟悉的朋友可以去Dojo里面好好体验一下。 下面我们针对TabBar平时的开发遇到的一些问题,来看下如何解决。...不过Issue也提到了很多方案来修复这个问题,其中比较好的一个方案,就是通过修改源码来实现,TabBar源码的_TabStyle的build函数,将实现改为下面的方案。...其实,我们是将Scala的效果,放到外面来实现,TabBar的tabs,我们将滑动百分比传入,借助隐式动画来实现Scala效果,这不就避免了抖动问题吗?...indicator indicator是TabBar另一个磨人的小妖精,由于indicator的存在,TabBar成了设计师自由发挥的重灾区,可以效果信手拈来,虽然Flutter提供很完善的接口来给开发者创建...原始的Indicator滑动时,是固定尺寸的,Tabbar源码,我们找到_IndicatorPainter,这个CustomPainter负责对Indicator的绘制,所以,我们要想获得类似Material

98820

【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

导航主体内容组件 七、完整代码示例 八、相关资源 一、Scaffold 组件 ---- Flutter 的 Scaffold 组件实现基础的材料设计 ( Material Design ) 可视化布局结构..., 根组件肯定是 MaterialApp , 然后下一层组件就是 DefaultTabController , 使用 DefaultTabController 包裹 Scaffold , 然后 Scaffold...TabBar 的组件都是无状态组件 , 或者不同的父类组件 , 导致创建 TabController 不方便时 , 就会使用该 DefaultTabController 组件 ; DefaultTabController...结合起来使用 ; TabBar Tab 子组件的个数 , TabController 的 length 长度 , TabBarView 中子组件的个数 , 三者必须相等 ; TabBar 构造函数...导航栏切换展示的主要内容 /// 用于 TabBarView 显示的组件 class TabContent extends StatelessWidget { const TabContent

2.5K40

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

上一篇讲完 Flutter 的一些基本部件,这篇就先填完上篇留下的没写的 AppBar 的坑,以及 Scaffold 其他参数的使用开始前,先补一张缩略版的脑图 ?...,居然已经埋了那么多坑,坑虽多,代码还是要继续的),因为稍后会用到 StatefulWidget 的属性,所以就直接先使用了,和 StatelessWidget 区别用法可以这么记 需要数据更新的界面用...PageView + TabBar 那么如何通过 TabBar 切换界面呢,这边我们需要用到 PageView 这个部件,当然还有别的部件,例如 IndexStack 等,小伙伴可以自己尝试使用别的,这边通过...controller 进行滚动 // duration 表示切换滚动的时长,curve 表示滚动动画的样式, // flutter 已经 Curves 定义许多样式...PageView 修改成单个 TabChangePage ,然后把 TabChangePage 这个类做下修改,把 Container 的 aligment 属性也注释,这样显示的内容就会显示左上角

1.7K20

Flutter完整开发实战详解(二、 快速开发实战篇)

从代码我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...Flutter 默认内置的 Icons 类就提供丰富的图标,直接通过 Icons 对象即可使用,同时个人推荐阿里爸爸的 iconfont 。...而 Map 的 key-value 使用开发过程并不是很方便,所以你需要对Map 再进行一次转化,转为实际的 Model 实体。  ...更多 Redux 的详细就不再展开,接下来我们讲讲 flutter_redux 的使用 redux 主要引入了 action、reducer、store 概念。...4、数据库   GSYGithubAppFlutter ,数据库使用的是 sqflite 的封装,其实就是 sqlite 语法的使用而已,有兴趣的可以看看完整代码 DemoDb.dart 。

4.9K30

Flutter | 容器组件

所以开发如果要对子组件进行限制,那么就一点要注意,因为一旦限制指定条件,子组件如果要进行相关自定义大小时将可能非常困难!...实际开发,当我们发现已经使用了 SizedBox 或者 ConstrainedBox 给定子元素宽高,但是仍然没有效果时,几乎可以断定:已经有父元素设置限制!...:子组件之上绘制,即前景 BoxDecoration 我们通常会直接使用 BoxDecoration 类,他是 Decoration 的子类,实现常用装饰元素的绘制 BoxDecoration({...由于 Tab 菜单和 Tab 页面的切换需要通过,我们需要通过 TabController 去监听 Tab菜单的切换,然后去切换 Tab 页面, 代码如: _tabController.addListener...,还需要在滑动过程更新 TabBar 指示器的偏移,显然,这样是非常麻烦的!

5.5K10

Flutter完整开发实战详解(二、 快速开发实战篇)

从代码我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...顶部TabBar效果   TabBar 页面,一般还会出现:父页面需要控制 PageView 中子页的需求。这时候就需要用到GlobalKey。...Flutter 默认内置的 Icons 类就提供丰富的图标,直接通过 Icons 对象即可使用,同时个人推荐阿里爸爸的 iconfont 。...而 Map 的 key-value 使用开发过程并不是很方便,所以你需要对Map 再进行一次转化,转为实际的 Model 实体。  ...4、数据库   GSYGithubAppFlutter ,数据库使用的是 sqflite 的封装,其实就是 sqlite 语法的使用而已,有兴趣的可以看看完整代码 DemoDb.dart 。

5.1K10

初识顶部导航栏【flutter20个实例之一】

,//标题前面显示的一个控件,首页通常显示应用的 logo;在其他界面通常显示为返回按钮 this.automaticallyImplyLeading = true, this.title...,//Toolbar 主要内容,通常显示为当前界面的标题文字 this.actions,//一个 Widget 列表,代表 Toolbar 中所显示的菜单,对于常用的菜单,通常使用 IconButton...来表示;对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点,点击后弹出二级菜单 this.flexibleSpace,//一个显示 AppBar 下方的控件,高度和 AppBar...高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget 对象,通常是 TabBar。...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation = 4.0,//纸墨设计控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当

1.3K20
领券