flutter TabController构造函数中的“vsync”属性

zvokhttg  于 2023-02-13  发布在  Flutter
关注(0)|答案(9)|浏览(469)

根据这个sample code
我创建了自己的TabController实现:

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        bottomNavigationBar: new Material(
          color: Colors.blue,
          child: new TabBar(
            controller: _tabController,
            isScrollable: false,
            tabs: choices.map((Choice choice) {
              return new Tab(
                text: null,
                icon: new Icon(choice.icon),
              );
            }).toList(),
          ),
        ),
        appBar: new AppBar(
          title: const Text('Swap'),
        ),
        body: new TabBarView(
          controller: _tabController,
          children: choices.map((Choice choice) {
            return new Padding(
              padding: const EdgeInsets.all(16.0),
              child: new ChoiceCard(choice: choice),
            );
          }).toList(),
        ),
      ),
    );
  }
}

在行:_tabController = new TabController(vsync: this, length: choices.length);中,我收到错误消息:
错误:参数类型"_MyAppState"无法分配给参数类型"TickerProvider"。([swap] lib/main. dart处的参数类型不可分配:24)
我的代码有什么问题?

mrphzbgm

mrphzbgm1#

在语句末尾添加以下任意一个SingleTickerProviderStateMixin/TickerProviderStateMixin混合函数,如下所示:
例如:
class_ListingViewState使用单个计时器提供者状态混合{}扩展状态

kuuvgm7e

kuuvgm7e2#

只需在类中使用SingleTickerProviderStateMixin进行扩展,就可以看到here full code

jdgnovmf

jdgnovmf3#

with TickerProviderStateMixin添加到State的类声明的末尾。

iovurdzv

iovurdzv4#

只需在extends状态类的末尾添加with TickerProviderStateMixin,如下所示:

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
//...
}
prdp8dxp

prdp8dxp5#

如前面所述,添加mixin后,TickerProviderStateMixin应该可以完成此任务;如果您只需要一个Ticker,也可以使用SingleTickerProviderStateMixin

但是TickerProviders到底是做什么的呢?
vsyncTickerProvider作为参数,这就是我们使用SingleTickerProviderStateMixin的原因,正如named所描述的那样,TickerProvider提供Ticker,这仅仅意味着它将通知我们的应用有关帧更新(或屏幕更新),以便我们的AnimationController可以生成新值,我们可以重绘动画小部件。

zlwx9yxi

zlwx9yxi6#

问题非常一般,因此需要详细描述

垂直同步用于

  • vsync是表示TickerProvider的属性(即,Tick类似于时钟的滴答声,这意味着TickerProvider将在每个特定持续时间呈现类状态并重绘对象)。
  • vsync属性仅在构造函数上是必需的,当我们需要呈现组件或小部件以重绘和反映UI时,构造函数需要在每个特定的偏移时间呈现其类状态。
  • 垂直同步可与需要某些过渡或动画来重新呈现以绘制不同对象的类一起使用。
    内部实施
TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
: assert(length != null && length >= 0),
  assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)),
  _index = initialIndex,
  _previousIndex = initialIndex,
  _animationController = AnimationController.unbounded(
    value: initialIndex.toDouble(),
    vsync: vsync,
  );

TabController在内部使用AnimationController来呈现选项卡栏状态

svmlkihl

svmlkihl7#

在类状态末尾添加***TickerProviderStateMixin***

以下是完整示例

@override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  MotionTabController? _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = new MotionTabController(initialIndex: 1, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController!.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}
6xfqseft

6xfqseft8#

上面的答案是正确的,但是你必须在类中声明一个标签栏,并从iniState初始化标签栏,否则vsync变量不接受'this'下面的代码可能会帮助你。

class _MatchesState extends State<Matches> with SingleTickerProviderStateMixin {
  TabController? tabController;
  @override
  void initState() {
    tabController = TabController(
      length: 2,
      vsync: this,
      initialIndex: 0,
    );
    super.initState();
  }
pn9klfpd

pn9klfpd9#

在GetX中
我发现了一个解决方案,只是添加与SingleGetTickerProviderMixin是完整的代码如下:

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ControllerViewModel extends GetxController with GetSingleTickerProviderStateMixin {
  AnimationController _controller;
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 2500,
      ),
    );
  }
}

相关问题