Flutter Hooks 详解：常用 Hooks 及代码示例

Flutter Hooks 是一组强大的函数，能够简化 Flutter 应用中的状态管理、副作用处理和代码组织。受 React Hooks 的启发，相比传统的 StatefulWidget 和 setState 模式，它们提供了更简洁和模块化的开发方式。

前置要求

在使用 Flutter Hooks 前，请确保满足以下条件：

Flutter SDK：已安装并配置（推荐 Flutter 3.x 或更高版本）
Dart SDK：随 Flutter 一起安装，确保是最新版本
IDE：Visual Studio Code、Android Studio 或 IntelliJ，并安装 Flutter 扩展
基础知识：熟悉 Widgets、StatelessWidget、StatefulWidget 和状态管理基础
包依赖：在 pubspec.yaml 中添加依赖并运行 flutter pub get：

1
2


dependencies:
  flutter_hooks: ^0.21.3+1

为什么使用 Flutter Hooks？

提升可读性和可维护性：Hooks 减少了样板代码，将状态和副作用逻辑直接嵌入 Widget 的 build 方法中。
可复用性：Hooks 可以抽象为自定义 Hooks，例如将复杂的数据获取逻辑提取为可复用函数。
细粒度状态管理：Hooks 允许管理小而独立的状态片段，特别适用于复杂 UI。
简化副作用处理：如 useEffect 提供了优雅的方式来处理生命周期相关任务。

常用 Flutter Hooks

useState Hook

用于在 HookWidget 内部声明和管理状态。

1

final counter = useState<int>(0);

useAnimationController Hook

自动管理动画控制器的生命周期。

1

final controller = useAnimationController(duration: const Duration(seconds: 1));

useEffect Hook

处理副作用，如数据获取或设置监听器。

1
2
3
4


useEffect(() {
  fetchData();
  return () => cancelSubscription();
}, []);

useMemoized Hook

缓存昂贵计算的结果，仅在依赖项变化时重新计算。

1

final calculatedValue = useMemoized(() => calculateExpensiveValue(), []);

useRef Hook

在多次重建之间保持可变引用。

1

final textController = useRef(TextEditingController());

useCallback Hook

记忆化回调函数，避免不必要的 Widget 重建。

1

final onPressed = useCallback(() => print('Pressed'), []);

useContext Hook

直接访问 BuildContext 中的值，如主题或 Provider。

1

final theme = useContext();

useTextEditingController Hook

简化文本控制器的创建和生命周期管理。

1

final usernameController = useTextEditingController();

如何创建自定义 Hook

将逻辑封装为可复用的 Hooks。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


String useFetchData() {
  final data = useState<String>('Loading...');
  useEffect(() {
    Future.microtask(() async {
      data.value = await fetchDataFromApi();
    });
    return null;
  }, []);
  return data.value;
}

示例：使用 Hooks 实现计数器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState<int>(0);
    useEffect(() {
      print('Count updated: ${count.value}');
      return null;
    }, [count.value]);
    return Column(
      children: [
        Text('You clicked ${count.value} times'),
        ElevatedButton(
          onPressed: () => count.value++,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

最佳实践

正确使用依赖列表（如 useEffect 和 useMemoized）。
避免过度工程化，有时 StatefulWidget 更简单。
充分测试，特别是涉及副作用时。
将可复用逻辑提取为自定义 Hooks，保持 Widget 简洁。

Hooks 与 Stateful Widgets 对比

Hooks：更简洁、模块化、可复用，适合复杂状态处理。
Stateful Widgets：适合初学者和简单状态管理场景。

附加资源

flutter_hooks 包