Flutter TabController vsync 的作用

10 min read

Flutter 中的 vsync 属性是 TabController 组件的一个参数,它指定了滚动组件与屏幕刷新率的同步方式

TabController 组件进行滚动操作时,它会与屏幕刷新率保持同步,从而确保滚动动画的流畅性。这种同步方式依赖于 Ticker 对象,因此需要提供一个能够创建 Ticker 对象的 TickerProvider 对象作为 vsync 属性的值。

例如,下面的代码使用 vsync 属性来指定 TabController 组件的滚动行为:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Text('Tab 1'),
              Text('Tab 2'),
              Text('Tab 3'),
            ],
          ),
        ),
        vsync: this,
      ),
    );
  }
}

在上面的代码中,我们使用 DefaultTabController 组件来创建一个标签栏组件,并为标签栏组件指定了 vsync 属性。由于 MyApp 类继承了 StatelessWidget 类,因此我们可以将 MyApp 类本身作为 vsync 属性的值。

需要注意的是,如果不指定 vsync 属性的值,则 TabController 组件的滚动行为可能会出现卡顿。因此,建议在使用