flutter中 _tabController = TabController(length: 2, vsync: this)；报错

最新推荐文章于 2024-02-24 15:13:44 发布

盼一族

最新推荐文章于 2024-02-24 15:13:44 发布

阅读量1.3k

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_42192113/article/details/118154998

版权

flutter 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要继承 with SingleTickerProviderStateMixin 动画用不然 vsync: this报错

class _HomePage extends State<HomePage>  with SingleTickerProviderStateMixin{ 
	TabController? _tabController;

	@override
	 void initState() {
	   super.initState();
	   _tabController = TabController(length: 2, vsync: this);
	 }
   
   ...
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

盼一族

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Flutter 基础篇（二十一）

m0_70083119的博客

05-03

724

AppBar({ Key key, this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。 this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮 this.title,// 页面标题 this.actions, // 导航栏右侧菜单 this.bottom, // 导航栏底部菜单，通常为Tab按钮组 this.elevation = 4.0, // 导航栏阴影 this.cent

Flutter 通过TabController 定义TabBar

10-06

语法使用页面必须继承StatefulWidget 页面必须实现SingleTickerProviderStateMixin 页面初始化时，实例化TabController 在TabBar组件中指定controller为我们实例化的TabController 在TabBarView组件中指定controller为我们实例化的TabController

2 条评论您还未登录，请先登录后发表或查看评论

Flutter 通过TabController实现顶部tab切换

qq_42572245的博客

06-12

1937

import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { const TabBarControllerPage({Key key}) : super(key: key); @override _TabBarControllerPageState createState() => _TabBarControllerPageState(); } class _T.

TabController vsync: this 报红

qq_26500807的博客

06-07

1035

添加

Flutter：TabController简单协调TabBar与TabView

weixin_34283445的博客

03-28

5612

简单 demo class _RankPageState extends State<RankPage>{ final List<Tab> titleTabs = <Tab>[ Tab( text: '今日实时榜', ), Tab( text: '昨日排行榜', ), Tab( t...

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

技术小黑屋

03-07

4447

Flutter 中，TabController 是连接 TabBar 与 TabBarView 的纽带，处理选中状态时必不可少的内容。但是当我们在监听 TabController 时，会...

android动态添加顶部tabbar,项目常用效果！Flutter仿头条顶部tab切换实现！

weixin_42501331的博客

05-26

904

概述今天主要实现一个仿头条顶部tab切换实现，这种效果在项目中同样经常用到，接下来我们就从头开始实现。效果图老规矩，开局先上效果图。仿头条顶部tab切换实现要实现这样的效果，需要使用TabBar进行实现。我们先讲一下TabBar的基本属性。TabBar 和 TabBarViewTabBar是属于AppBar中的一个组件，通常和TabBarView结合使用。TabBar构造方法及常用属性简介con...

Flutter 中TabController实现底部tab切换

蓝枫

02-07

2567

import 'package:flutter/material.dart'; class TabControllerPage extends StatefulWidget { TabControllerPage({Key key}) : super(key: key); _TabControllerPageState createState() => _TabControlle...

【Flutter学习记录】TabBar、TabBarView与TabController：难舍难分

weixin_42599186的博客

04-16

1396

前言今天在学《Flutter实战》的TabBar组件的时候，遇到一个令我哭笑不得的bug，在此记录一下，以免以后继续掉坑。 TabBar 关于TabBar的知识我建议直接看《Flutter实战》5.6.2 AppBar 。此书十分优秀，强烈建议学习。坑起因是因为书上的一个示例： Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码： class _ScaffoldRouteState extends State<ScaffoldRoute>

Flutter实现iOS TabBarController效果和android TabHost效果

我叫柱子哥

06-22

813

先上截图，如何实现下图的效果呢。对于iOS开发者，我们可以使用UITabBarController来实现,对于android开发者,我们可以使用FragmentTabHost来实现。在Flutter中并没有这两个控件，进入正题，我们看看在Flutter中我们如何使用Flutter中的PageView来实现这种效果。

Flutter自定义动态长度TabBar样式后与TabBarView联动过慢解决

欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN

05-31

2529

如图中TabBarView滑动后TabBar联动滞后修改前源码 _controller = TabController( length: titleTabs.length, vsync: _tickerProvider, initialIndex: currentIndex) ..addListener(() { //TODO 监听滑动/点选位置 }); _buildBody(B

flutter 更新3.0版本导致TabController的ScrollableState报错

qq_25062671的博客

08-04

238

flutter 更新3.0版本导致TabController的ScrollableState报错

Flutter 多标签页显示有关TabController需要知道的知识

最新发布

知行合一

02-24

1620

在flutter中，实现这样的功能需要依靠TabBar（进行页面选择）和TabBarView（展示不同页面），而TabController起到沟通这两个控件的作用。很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑，比如购物软件常有：已完成，已发货，待付款三个顶部导航按钮，点击则下面的页面显示不同属性的订单。如果每个标签页中都有复杂的布局或需要加载大量数据，会影响性能。更复杂功能的场景，比如动态添加或删除标签页，监听标签页变化，需要手动创建TabController。

Flutter GetXController 动态Tabbar 报错问题

zww986736788的博客

08-19

1572

在请求到标题数据后，再给tabbarController 重新赋值就好。在onInit 方法中初始化tabbarController。1.Tabbar的内容是接口获取的。

Getx在Controller里添加TabController的处理

Restless Breeze

08-11

4481

其实处理方式也很简单，getx提供了GetSingleTickerProviderStateMixin去处理tabBarView的tab点击监听事件的。其实处理方法和在StatefulWidget里的state里一样，无非一个是在widget里，一个在Controller里。二、假如我又需要自己控制TabController呢，DefaultTabController不能监听到tab的点击处理事件，咋办？正好因为项目中遇到这个问题，网上搜了下，不少同学也遇到了。有同学就提出此疑问，...

Flutter TabController DefaultTabController 中添加监听器？

weijia3624的专栏

04-12

682

【代码】TabController DefaultTabController 中添加监听器？

Flutter 监听 tabBar 左右滑动事件

06-03

在 Flutter 中，可以通过使用 `TabBarView` 和 `PageView` 来实现 TabBar 的左右滑动事件监听。具体步骤如下： 1. 创建一个 `TabController` 对象，并将其与 `TabBar` 和 `TabBarView` 绑定： ```dart TabController _tabController; @override void initState() { _tabController = TabController(length: 3, vsync: this); super.initState(); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tab Bar Example'), bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ), ), body: TabBarView( controller: _tabController, children: [ Container(color: Colors.red), Container(color: Colors.green), Container(color: Colors.blue), ], ), ); } ``` 2. 使用 `PageView` 包裹 `TabBarView`，并监听 `PageView` 的 `onPageChanged` 事件，以获取左右滑动事件： ```dart PageController _pageController; @override void initState() { _tabController = TabController(length: 3, vsync: this); _pageController = PageController(initialPage: 0); super.initState(); } @override void dispose() { _tabController.dispose(); _pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tab Bar Example'), bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], ), ), body: PageView( controller: _pageController, children: [ Container(color: Colors.red), Container(color: Colors.green), Container(color: Colors.blue), ], onPageChanged: (index) { _tabController.animateTo(index); }, ), ); } ``` 这样，就可以通过监听 `PageView` 的 `onPageChanged` 事件来获取 TabBar 的左右滑动事件了。注意，需要在 `onPageChanged` 事件中手动调用 `_tabController.animateTo(index)` 来更新 TabBar 的状态。

flutter中 _tabController = TabController(length: 2, vsync: this)； 报错

flutter中 _tabController = TabController(length: 2, vsync: this)；报错