Flutter TabController 多次调用，导致切换异常问题

最新推荐文章于 2023-09-21 09:50:56 发布
最新推荐文章于 2023-09-21 09:50:56 发布
阅读量4.5k 收藏
点赞数
文章标签： java vue js python javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x2L5gX/article/details/123342998
版权
Flutter中的TabController在监听时可能出现多次调用问题，导致Tab切换异常。通过分析日志和理解isIndexChanging属性，了解到该属性在animateTo过程中为true，用户手势操作后为false。为了防止页面切换错乱，解决方案是在处理切换时等待indexIsChanging为false再使用index值。进行此判断可确保正确的页面切换行为。
摘要由CSDN通过智能技术生成

Flutter  中，TabController 是连接 TabBar 与 TabBarView 的纽带，处理选中状态时必不可少的内容。

但是当我们在监听 TabController 时，会发现又多次调用

@override
void initState() {
 super.initState();
 _tabController = TabController(vsync: this, length: myTabs.length);
 _tabController.addListener(() {
   debugPrint('initState currentIndex=${_tabController.index}');
 });
}

对应的多次调用日志如下。

[ +153 ms] I/flutter (13788): initState currentIndex=2
[ +344 ms] I/flutter (13788): initState currentIndex=2
[+9932 ms] I/ViewRootImpl@9e6d4e6[MainActivity](13788): ViewPostIme pointer 0
[  +94 ms] I/ViewRootImpl@9e6d4e6[MainActivity](13788): ViewPostIme pointer 1
[   +5 ms] I/flutter (13788): initState currentIndex=0
[ +320 ms] I/flutter (13788): initState currentIndex=0

但是为什么会调用两次呢，是bu

最低0.47元/天 解锁文章
技术小黑屋_
关注
Flutter动态加载TabBar
徐代龙的技术专栏
08-09 8480
效果图： 这里主要是用了TabController这个controller，而不是用的默认的DefaultTabController，TabBar跟TabBarView必须关联起来，否则会报错。我这个上面的代码改得还有点多，因为还加入了listview，各位看官就暂时凑合着看吧。 源码贴出来 源码： import 'dart:convert'; import 'package:flutter/...
Flutter 中TabController实现底部tab切换
蓝枫
02-07 2599
import 'package:flutter/material.dart'; class TabControllerPage extends StatefulWidget { TabControllerPage({Key key}) : super(key: key); _TabControllerPageState createState() => _TabControlle...
flutter tabcontroller监听点击调用两次
wilL-my的博客
02-02 3210
原因：点击本身出发一次监听，随之产生的动画效果再次出发监听，如果是滑动，仅触发一次监听 解决：看下点击的索引和动画值对不对，过滤掉点击的listen，只显示动画的listen _tabController.addListener(() { if(_tabController.index == _tabController.animation?.value){ print("点击了"); } }); ...
flutter TabController切换tab两次回调问题
androidhyf的博客
09-06 227
点击切换tab的时候执行了一个动画效果 在这个过程中触发了一次Listener。
TabController 回调两次处理
最新发布
hsw
09-21 199
通过打印发现 两次的 index 是相同的，然后发现还有一个参数就是 indexIsChanging 结合打印发现 indexIsChangeing 两次 只有一次为false。使用 TabController 的 addListener 方法监听，发现每次都会回调两次，对于同步操作还好处理，如果是异步操作就比较难处理了。
Flutter 通过TabController实现顶部tab切换
qq_42572245的博客
06-12 1956
import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { const TabBarControllerPage({Key key}) : super(key: key); @override _TabBarControllerPageState createState() => _TabBarControllerPageState(); } class _T.
flutter web调用手机摄像头并切换前后摄像头
02-25
flutter web调用手机摄像头并切换前后摄像头
Flutter - TabController监听index
H.A.N的博客
03-20 8474
简单一个小例子： class _RankPageState extends State<RankPage>{ final List<Tab> titleTabs = <Tab>[ Tab( text: '全部', ), Tab( text: '待付款', ), Tab( text: ...
Flutter TabBar 监听竟调用两次
不会前端的安卓不是好JAVA工程师
02-15 2000
码字辛苦！转载请注明出处！ 0.前言 Flutter的TabViewController，并不会懒加载视图，在你创建TabBarView的那一刻起，所有的界面就被一股脑儿全部加载完了 那么作为一个优雅的程序员，怎么能允许这种性能浪费呢！ 咔哒咔哒敲完TabController，Run完背脊一凉，发现事情并没有那么简单 TabController的Listener竟然被调用了两次！！！ 1.解决方法 小问题不多叭叭，加个判断，问题解决： tabController.addListener
Flutter 通过TabController 定义TabBar
10-06
语法使用 页面必须继承StatefulWidget 页面必须实现SingleTickerProviderStateMixin 页面初始化时，实例化TabController 在TabBar组件中指定controller为我们实例化的TabController 在TabBarView组件中指定controller为我们实例化的TabController
Futter基础第12篇： 实现TabController定义顶部tab切换，并介绍生命周期函数
qq_27494201的博客
12-05 1240
效果图： Home.dart TabBarController.dart Home.dart import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } ...
Flutter：TabController简单协调TabBar与TabView
weixin_34283445的博客
03-28 5642
简单 demo class _RankPageState extends State<RankPage>{ final List<Tab> titleTabs = <Tab>[ Tab( text: '今日实时榜', ), Tab( text: '昨日排行榜', ), Tab( t...
Flutter组件--分段控制器(DefaultTabController)
eastWind1101的博客
10-20 1971
Flutter中分段控制器, DefaultTabController,TabBar,TabBarView
Flutter的TabController和bottomNavigationBar组合使用
weixin_42514162的博客
11-24 430
使用这两个组件可以快速搭建一个普通App的基本骨架，剩下的就是添加内容了。 废话不多说，直接上效果。 之前，学Andoid使用的组件那么费劲，又是fragment，又是Activity。使用TabLayout，在那使劲搭建，没想到Flutter这么简洁，感觉自己像个蠢蛋。但是，yysy，这个编译好慢。代码如下(全部，懒得重新创建文件放首页的内容了)： import 'package:flutter/material.dart'; void main() => runApp(MyApp())
Flutter 踩坑TabBar之TabController.addListener
开发以大橘为重
12-12 8900
一、问题 之前提到TabBar的第二种实现方式 TabController是有坑的。 问题：这个监听在点击切换tab的时候会回调两次，左右滑动切换tab正常调用一次。 二、原因 点击切换tab的时候执行了一个动画效果，滑动切换的时候是没有的，在这个过程中触发了一次Listener。 三、解决方案 在执行动画的过程中，有这样一个值： value，记录了每次tab的偏移量，我观察了一下，在监听被调...
20Flutter通过TabController定义顶部tab切换，介绍生命周期函数
weixin_30522095的博客
09-11 1066
基本使用： import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { TabBarControllerPage({Key key}) : super(key: key); _TabBarControllerPageState creat...
Flutter组件--TabBar使用详情(分段控制器)
eastWind1101的博客
11-21 9520
TabBar使用详情, TabController,分段控制器,左右滑动试图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值