Flutter TabBar和TabBarView联动后,监听响应两次的问题

已于 2022-06-15 15:25:23 修改
阅读量1.5k 收藏 1
点赞数 1
分类专栏： Flutter 文章标签： flutter
于 2022-06-10 10:50:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_yang123/article/details/125217098
版权

前提: TabBar和TabBarView 如果需要联动起来就必须使用同一个control

2.对改control添加监听

3. 查看我们打印的log,可以看出TabBarView 在滑动的时候响应一次,点击TabBar的时候响应两次

4.如上问题产生的原因就是因为动画, 实质上tabBar和tabBarView只会响应一次,但是因动画的加入,在动画执行完毕后,会再响应一次,确定问题后,解决方案如下:

解决方式:通过判断当前索引是否等同于动画的偏移量

_tabController!.index == _tabController!.animation!.value

csdn_yang123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ViewPager+Fragment滑动页面，tabbar跟着实时滑动
07-29
ViewPager+Fragment滑动页面，tabbar跟着实时滑动
TabBar和TabBarView实现顶部滑动导航
juer2017的博客
07-19 1571
Flutter中TabBar和TabBarView实现顶部滑动导航
Flutter 中的 TabBarView 小部件：全面指南
最新发布
smileKH的博客
05-23 810
TabBarView是Flutter材料设计库中的一个组件，它显示与TabBar中的选项卡相对应的页面。当用户点击TabBar上的一个选项卡时，TabBarView会显示对应的页面。TabBarViewcontroller：用于控制TabBarView的。children：一个包含将要显示的页面的列表。physics：决定TabBarView的滑动物理效果。],physics: NeverScrollableScrollPhysics(), // 禁止滑动。
Flutter重写ScrollPhysics实现ExtendedTabBarView滑动到边缘的监听
吃松子的猫的博客
11-23 2165
Flutter项目开发中，使用了 TabBar+ExtendedTabBarView 实现了页面左右滑动的功能。 正常的使用，手势滑动结束的效果是根据ExtendedTabBarView的参数physics控制的，physics有NeverScrollablePhysics（不可滚动）、BouncingScrollPhysics（类似IOS回弹效果）、ClampingScrollPhysics（默认Android上的水波纹效果）、AlwaysScrollableScrollPhysics等多种回弹效果。
flutter TabBar 监听选择索引
qq_37124515的博客
03-12 2327
# 定义_tabController TabController _tabController; ### 初始化添加监听方法 // 初始化 @override void initState() { super.initState(); _tabController = TabController( length: widget.tabs.length, vsync: this, initialIndex: widget.default.
Flutter实现Android原生TabLayout + ViewPager 页面切换以及切换监听
Lyang666的博客
01-29 1998
方式一： 使用Flutter自带的Widget（TabBar + TabBarView）实现，如下 List _tabs = ["A", "B", "C"]; @override void initState() { super.initState(); _tabController = TabController(length: _tabs.length, vsync: this); _tabController.addListener(() { ...
Flutter自定义TabBar的Indicator.zip
03-02
在本文中，我们将深入探讨如何在Flutter中自定义TabBar的Indicator，以便实现类似秒杀Tab的视觉效果。Flutter是一个由Google开发的开源UI工具包，用于构建高性能、高保真、多平台的移动应用程序。TabBar是Flutter中...
Flutter 滚动悬浮导航栏TabBar
02-11
本文将深入探讨如何在Flutter中实现滚动悬浮的导航栏，即TabBar，结合SliverAppBar、PageView和NestedScrollView等组件，为用户提供流畅的滚动体验。 一、Flutter TabBar基础 TabBar是Flutter中的一个核心组件，它...
flutter 中监听滑动事件
08-25
Flutter 中监听滑动事件 Flutter 中监听滑动事件是移动应用程序中非常重要的一部分，对用户交互体验有着直接的影响。在 Flutter 中，可以使用 Listener widget 来监听原始触摸事件，它也是一个功能性 widget。...
rounded_tabbar_widget:一个简单的flutter包，用于使用自定义Tabbar创建TabBarView布局
03-30
rounded_tabbar_widget 语言：一个简单的flutter包，用于使用自定义Tabbar创建TabBarView布局。 技术说明：页面布局是使用TabbarView构建的，并且Tab按钮的布局是自定义的。 该软件包也支持要滚动的页面。如何使用它...
flutter页面滚动联动实现
03-25
在Flutter开发中，页面滚动联动是一项重要的功能，尤其在复杂布局和交互设计中。`NestedScrollView`和`CustomScrollView`是Flutter提供给开发者用于实现这一功能的关键组件。本篇文章将详细解析如何使用这两个组件来...
flutter Tabbar
python4_1的博客
02-21 212
flutter tabbar
Flutter基础控件：TabBar、TabBarView
青蛙不吃草
07-29 2145
TabBar、TabBarViewTabBar属性 TabBar属性 const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的
Flutter TabBar 监听竟调用两次
不会前端的安卓不是好JAVA工程师
02-15 1840
码字辛苦！转载请注明出处！ 0.前言 Flutter的TabViewController，并不会懒加载视图，在你创建TabBarView的那一刻起，所有的界面就被一股脑儿全部加载完了 那么作为一个优雅的程序员，怎么能允许这种性能浪费呢！ 咔哒咔哒敲完TabController，Run完背脊一凉，发现事情并没有那么简单 TabController的Listener竟然被调用了两次！！！ 1.解决方法 小问题不多叭叭，加个判断，问题解决： tabController.addListener
Flutter 页面切换监听与下拉刷新
xiaokangss的博客
04-17 859
//定义全局的 routeObserver 对象 final RouteObserver < PageRoute > routeObserver = RouteObserver();runApp();} }如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。
Flutter学习笔记-Tabbar选项卡 顶部切换导航
u010186280的博客
09-17 556
使用Flutter提供的Tabbar和TabBarView，实现顶部选项卡的切换 效果图 代码 class PersonalMyOrderPage extends StatefulWidget { @override _PersonalMyOrderPageState createState() => _PersonalMyOrderPageState(); } class _PersonalMyOrderPageState extends State<PersonalMyOrder
IOS tabbarController 的delegate控制双击不会返回
MoMo_KUA_1的专栏
06-30 1127
#pragma -mark UITabBarControllerDelegate - (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController { if ([viewController i
ios tabbar监听点击事件
pureszgd的博客
03-07 1987
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSLog(@"%d", item.tag); }
【Flutter从入门到实战】 ⑨、滚动的Widget-ListView、GridView、SliverWidget、滚动的Widget的滚动监听的方式
慢慢来就很快。
03-15 1711
Flutter从入门到实战 一共分为23个系列 ①(Flutter、Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 ③(Dart语法2 篇) 共2个内容 已更新 ④(Flutter案例开发篇) 共4个内容 已更新 ⑤(Flutter的StatelessWidget 共3个内容 已更新 ⑥(Flutter的基础Widget篇) 共2个内容 已更新 ⑦(布局Widget篇) 共1个内容 已更新 ⑧(滚动Widget篇) 共1个内容 已更新 官方文档说明 官方视.
flutter怎么通过路由从别的页面跳转到TabBar和TabBarView里面页面
07-14
要从另一个页面跳转到TabBar和TabBarView中的页面，您可以使用Flutter的导航机制。以下是一个简单的示例： 假设您有两个页面：HomePage和TabbedPage。HomePage包含一个按钮，点击该按钮将导航到TabbedPage，TabbedPage包含TabBar和TabBarView，每个标签对应一个页面。 在HomePage中，您可以使用Navigator.push方法跳转到TabbedPage： ```dart import 'package:flutter/material.dart'; import 'tabbed_page.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), body: Center( child: RaisedButton( child: Text('Go to Tabbed Page'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => TabbedPage()), ); }, ), ), ); } } void main() { runApp(MaterialApp( home: HomePage(), )); } ``` 在TabbedPage中，您可以创建一个DefaultTabController来管理TabBar和TabBarView，并在TabBar中定义标签。每个标签对应一个页面。 ```dart import 'package:flutter/material.dart'; import 'tab_page.dart'; class TabbedPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tabbed Page'), bottom: TabBar( tabs: [ Tab(text: 'Page 1'), Tab(text: 'Page 2'), ], ), ), body: TabBarView( children: [ TabPage(title: 'Page 1'), TabPage(title: 'Page 2'), ], ), ); } } class TabPage extends StatelessWidget { final String title; TabPage({this.title}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(title), ), ); } } ``` 在上面的示例中，TabbedPage使用TabBar和TabBarView来展示两个页面。每个页面由TabPage小部件表示。您可以根据实际需求自定义这些页面。 当您从HomePage点击按钮跳转到TabbedPage时，将会显示TabBar和TabBarView，并且您可以在TabBar中进行不同标签页之间的切换。 希望对您有所帮助！如果有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值