Flutter基础学习

愚者Pro2026-05-06 17:30

核心概念映射

2.Flutter 中 with SingleTickerProviderStateMixin 详解

它是什么：with 是 Dart 的 mixin 语法，类似 Vue 3 的 composable（组合式函数）或 Vue 2 的 mixins，用来给类混入额外的能力。

SingleTickerProviderStateMixin 专门提供一个东西：vsync。

vsync 是什么：Flutter 的动画需要一个"节拍器"来驱动，这个节拍器叫 Ticker。它的作用是每一帧（约 16ms）触发一次回调，驱动动画值从 0 变到 1。

vsync 的意思是"垂直同步"------让动画帧率和屏幕刷新率同步，避免在屏幕不可见时白白消耗 CPU。

SingleTickerProviderStateMixin 让 this 具备了作为 vsync 参数值的资格。

javascript 复制代码

// 需要 vsync 的场景
AnimationController _controller = AnimationController(
  vsync: this,  // ← 这里需要 TickerProvider，mixin 提供了 this 的能力
  duration: const Duration(milliseconds: 300),
);

TabController _tabController = TabController(
  length: 2,
  vsync: this,  // ← 同样需要
);

3.late 关键字详解

Dart 是空安全语言，默认所有变量声明时必须赋初值。late 的意思是："我保证这个变量在第一次被使用之前一定会被赋值，但现在暂时不赋"。等价于：

Dart 复制代码

// Flutter
late TabController _tabController;

// Vue/TS
let tabController!: TabController  // TS 的非空断言，告诉编译器"我知道我在做什么"

GlobalKey

它的作用是拿到已经存在的子组件的 State 对象的引用，从而调用它的方法。相当于Vue中的Ref

Dart 复制代码

/** <PushDrawerState> 泛型的意思
GlobalKey<PushDrawerState> 里的泛型指定了"我要拿的是哪种 State"。

这样 _drawerKey.currentState 返回的就是 PushDrawerState 类型，你能直接调用它上面定义的 open()、close() 方法，IDE 也有代码提示。

如果不写泛型直接用 GlobalKey()，currentState 返回的是 State 基类，没有 open/close 方法，需要手动强转。
**/
final GlobalKey<PushDrawerState> _drawerKey = GlobalKey<PushDrawerState>();