[TOC] > [home](https://pub.dev/packages/flutter_hooks) ## 概述 像使用 flutter_hook一样使用 flutter 适合用在组件内部的状态变更 ## 示例 ### useState / useMemoized ``` import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; // 一个使用 Hook 的计数器示例组件 class FlutterHook extends HookWidget { const FlutterHook({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // 使用 useState 管理状态 final counter = useState(0); // 使用 useEffect 处理副作用 useEffect(() { print('组件已挂载'); return () { print('组件将要卸载'); }; }, []); // 空数组表示只在组件挂载和卸载时执行 // 使用 useMemoized 缓存计算结果 final doubledCount = useMemoized(() => counter.value * 2, [counter.value]); return Scaffold( appBar: AppBar( title: const Text('Flutter Hooks 示例'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '点击次数: ${counter.value}', style: const TextStyle(fontSize: 24), ), Text( '双倍值: $doubledCount', style: const TextStyle(fontSize: 24), ), const SizedBox(height: 20), ElevatedButton( onPressed: () => counter.value++, child: const Text('增加'), ), ], ), ), ); } } // 自定义 Hook 示例 T useCustomDebounce<T>(T value, Duration delay) { final valueState = useState(value); useEffect(() { final timer = Future.delayed(delay, () { valueState.value = value; }); return () => timer.ignore(); }, [value, delay]); return valueState.value; } ``` ### 动画 ``` class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Animation Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const AnimationDemo(), ); } } class AnimationDemo extends HookWidget { const AnimationDemo({super.key}); @override Widget build(BuildContext context) { // 创建一个 AnimationController final controller = useAnimationController( duration: const Duration(seconds: 2), // 设置初始值为0.0 initialValue: 0.0, ); // 使用 useEffect 在组件初始化时启动动画 useEffect(() { controller.repeat(reverse: true); return null; }, [controller]); return Scaffold( appBar: AppBar( title: const Text('动画示例'), ), body: Center( child: AnimatedBuilder( animation: controller, builder: (context, child) { return Transform.scale( scale: 1.0 + controller.value, child: Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10), ), ), ); }, ), ), ); } } ```