# Flutter 状态管理 Flutter 状态管理的综合指南，涵盖 BLoC、Riverpod、Provider、GetX 以及用于构建可扩展 Flutter 应用程序的其他现代模式。 ## 何时使用此技能 * 选择正确的状态管理解决方案 * 使用flutter_bloc实现BLoC模式 * 使用 Riverpod 进行依赖注入和状态 * 从一种状态管理迁移到另一种状态管理 * 扩展大型应用程序中的状态管理 * 测试状态管理逻辑 * 实施反应模式 * 管理复杂的应用程序状态 * 处理异步状态更新 * 构建离线优先的应用程序 ## 核心概念 ### 1\.状态管理概述 * **本地状态** ：单个小部件所需的状态 * **应用程序状态**：小部件之间共享的状态 * **短暂状态** ：临时 UI 状态 * **应用程序状态**：业务逻辑和数据 * **持久状态** ：应用程序重新启动后仍保留的数据 * **派生状态** ：从其他状态计算 ### 2\.何时使用每种解决方案 * **setState** : 简单的本地小部件状态 * **InheritedWidget/Provider** ：简单的依赖注入 * **Riverpod** ：具有编译时安全性的现代 DI * **BLoC** ：复杂的业务逻辑，可测试性 * **GetX** ：快速开发，最少的样板文件 * **Redux** ：具有时间旅行调试的可预测状态 * **MobX** ：使用可观察量进行反应式编程 ## BLoC 模式（业务逻辑组件） ### 模式 1：基本 BLoC 实现 // 事件抽象类 CounterEvent {} IncrementCounter 类扩展 CounterEvent {} 类 DecrementCounter 扩展 CounterEvent {} // 状态类计数器状态{ 最终整数计数； const CounterState(this.count); } // 块类 CounterBloc 扩展 Bloc { CounterBloc() : 超级(const CounterState(0)) { on(_onIncrement); on(_onDecrement); } void _onIncrement(IncrementCounter 事件, Emitter 发出) { 发出(CounterState(state.count + 1)); } void _onDecrement(DecrementCounter 事件, Emitter 发出) { 发出（CounterState（state.count - 1））； } } // 用户界面类 CounterPage 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 返回块提供者（创建：(_) => CounterBloc(), 子：CounterView(), ）； } } 类 CounterView 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 返回脚手架（ appBar: AppBar(标题: const Text('Counter')), 身体：中心（子：BlocBuilder( 构建器：（上下文，状态）{ return Text('${state.count}', style: Theme.of(context).textTheme.headlineLarge); }, ), ), 浮动操作按钮：列（ mainAxisAlignment：MainAxisAlignment.end，孩子们：[ 浮动操作按钮( onPressed: () => context.read().add(IncrementCounter()), 孩子：常量图标（Icons.add）， ), 常量 SizedBox(高度: 8), 浮动操作按钮( onPressed: () => context.read().add(DecrementCounter()), 孩子：常量图标（Icons.remove）， ), ], ), ）； } } ### 模式 2：使用 API 调用的 BLoC // 具有密封类的状态密封类 UserState {} 类 UserInitial 扩展 UserState {} 类 UserLoading 扩展 UserState {} 类 UserLoaded 扩展 UserState { 最终列表用户； UserLoaded(this.users); } 类 UserError 扩展 UserState { 最终字符串消息； UserError(this.message); } // 事件密封类 UserEvent {} 类 LoadUsers 扩展 UserEvent {} 类 RefreshUsers 扩展 UserEvent {} // 通过 API 调用进行 BLoC 类 UserBloc 扩展 Bloc { 最终 UserRepository 存储库； UserBloc({必需 this.repository}) : super(UserInitial()) { on(_onLoadUsers); on(_onRefreshUsers); } Future _onLoadUsers(LoadUsers 事件, Emitter 发出) 异步 { 发射（用户加载（））；尝试{ 最终用户=等待repository.getUsers(); 发出（UserLoaded（用户））； } 捕获 (e) { 发出(UserError(e.toString())); } } Future _onRefreshUsers(RefreshUsers 事件，Emitter 发出) 异步 { // 刷新时保持当前状态尝试{ 最终用户=等待repository.getUsers(); 发出（UserLoaded（用户））； } 捕获 (e) { 发出(UserError(e.toString())); } } } // 使用 BlocBuilder 的 UI 类 UserListPage 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 返回块提供者（创建：（上下文）=> UserBloc（存储库： context.read(), )..add(LoadUsers()), 孩子：脚手架（ appBar: AppBar(标题: const Text('用户')), 主体：BlocBuilder （构建器：（上下文，状态）{ 返回开关（状态）{ UserInitial() => const Center(child: Text('按下按钮加载')), UserLoading() => const Center(child: CircularProgressIndicator()), UserLoaded(用户: var users) => ListView.builder( itemCount: 用户.长度, itemBuilder：（上下文，索引）{ 最终用户=用户[索引]；返回列表图块（标题：文本（用户名），副标题：文本（用户.电子邮件），）； }, ), UserError(消息: var message) => 中心( 子项：列（ mainAxisAlignment：MainAxisAlignment.center，孩子们：[ Text('错误：$message'), 升高的按钮( onPressed: () => context.read().add(LoadUsers()), 孩子：const Text（'重试'）， ), ], ), ), }; }, ), 浮动操作按钮：浮动操作按钮（ onPressed: () => context.read().add(RefreshUsers()), 孩子：常量图标（Icons.refresh）， ), ), ）； } } ## 河波德 ### 模式 3：基本 Riverpod 提供商 // 提供者最终 counterProvider = StateProvider((ref) => 0); // 用户界面类 CounterPage 扩展 ConsumerWidget { @覆盖 Widget build(BuildContext context, WidgetRef ref) { 最终计数 = ref.watch(counterProvider); 返回脚手架（ appBar: AppBar(标题: const Text('Counter')), 身体：中心（ child: Text('$count', style: Theme.of(context).textTheme.headlineLarge), ), 浮动操作按钮：浮动操作按钮（ onPressed: () => ref.read(counterProvider.notifier).state++, 孩子：常量图标（Icons.add）， ), ）； } } ### 模式 4：带有 AsyncNotifier 的 Riverpod // 模型类用户{ 最终字符串ID；最终字符串名称；最终字符串电子邮件； User({必填 this.id, 必填 this.name, 必填 this.email}); } // 异步通知器类 UserListNotifier 扩展 AsyncNotifier> { @覆盖 Future> build() 异步 { // 加载初始数据返回 _fetchUsers(); } Future> _fetchUsers() 异步 { 最终存储库 = ref.read(userRepositoryProvider); 返回存储库.getUsers(); } Future 刷新() 异步 { 状态 = const AsyncValue.loading(); 状态 = 等待 AsyncValue.guard(() => _fetchUsers()); } Future addUser(User user) 异步 { 状态 = const AsyncValue.loading(); 状态 = 等待 AsyncValue.guard(() 异步 { 最终存储库 = ref.read(userRepositoryProvider); 等待存储库.addUser(用户); 返回 _fetchUsers(); }); } } // 提供者最终 userListProvider = AsyncNotifierProvider>(() { 返回 UserListNotifier(); }); // 用户界面类 UserListPage 扩展 ConsumerWidget { @覆盖 Widget build(BuildContext context, WidgetRef ref) { 最终 usersAsync = ref.watch(userListProvider); 返回脚手架（ appBar: AppBar(标题: const Text('用户')), 正文： usersAsync.when( 数据：（用户）=> ListView.builder（ itemCount: 用户.长度, itemBuilder：（上下文，索引）{ 最终用户=用户[索引]；返回列表图块（标题：文本（用户名），副标题：文本（用户.电子邮件），）； }, ), 加载：() => const Center(child: CircularProgressIndicator()), 错误：（错误，堆栈）=>中心（子项：列（ mainAxisAlignment：MainAxisAlignment.center，孩子们：[ 文本（'错误：$错误'），升高的按钮( onPressed: () => ref.refresh(userListProvider), 孩子：const Text（'重试'）， ), ], ), ), ), 浮动操作按钮：浮动操作按钮（ onPressed: () => ref.read(userListProvider.notifier).refresh(), 孩子：常量图标（Icons.refresh）， ), ）； } } ### 模式 5：Riverpod 系列和 AutoDispose // 带参数的提供者（family）最终 userProvider = FutureProvider.autoDispose.family((ref, userId) async { 最终存储库 = ref.watch(userRepositoryProvider); 返回repository.getUser(userId); }); // 用户界面类 UserDetailPage 扩展 ConsumerWidget { 最终字符串用户ID； const UserDetailPage({required this.userId}); @覆盖 Widget build(BuildContext context, WidgetRef ref) { 最终 userAsync = ref.watch(userProvider(userId)); 返回脚手架（ appBar: AppBar(标题: const Text('用户详细信息')), 正文： userAsync.when( 数据：（用户）=> 填充（填充：const EdgeInsets.all(16), 子项：列（ crossAxisAlignment：CrossAxisAlignment.start，孩子们：[ Text('姓名：${用户名}'), Text('电子邮件：${user.email}'), ], ), ), 加载：() => const Center(child: CircularProgressIndicator()), 错误：（错误，堆栈）=>中心（子：文本（'错误：$错误'））， ), ）； } } ## 提供者模式 ### 模式 6：ChangeNotifier 与 Provider // 模型类 Counter 扩展 ChangeNotifier { int_count = 0; int 获取计数 => _count；无效增量（）{ _count++；通知监听器（）； } 无效减量（）{ _计数--；通知监听器（）； } } // 主应用程序设置无效主（）{ 运行应用程序（更改通知提供者（创建：(_) => 计数器()，孩子：MyApp(), ), ）； } // 用户界面类 CounterPage 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 返回脚手架（ appBar: AppBar(标题: const Text('Counter')), 身体：中心（孩子：消费者<计数器>( 构建器：（上下文，计数器，子级）{ return Text('${counter.count}', style: Theme.of(context).textTheme.headlineLarge); }, ), ), 浮动操作按钮：浮动操作按钮（ onPressed: () => context.read().increment(), 孩子：常量图标（Icons.add）， ), ）； } } ## 获取X ### 模式 7：GetX 控制器 // 控制器类 CounterController 扩展 GetxController { 最终计数 = 0.obs； voidincrement() => count.value++; void decrement() => count.value--; } // 用户界面类 CounterPage 扩展 StatelessWidget { @覆盖小部件构建（BuildContext上下文）{ 最终控制器 = Get.put(CounterController()); 返回脚手架（ appBar: AppBar(标题: const Text('Counter')), 身体：中心（孩子：Obx(() => 文本( '${controller.count}', 样式：Theme.of(context).textTheme.headlineLarge, ））， ), 浮动操作按钮：浮动操作按钮（ onPressed: 控制器.increment, 孩子：常量图标（Icons.add）， ), ）； } } ## 测试状态管理 ### 模式 8：测试 BLoC 无效主（）{ 组（'CounterBloc'，（）{ 晚期CounterBloc集团；设置（（）{ 块 = CounterBloc(); }); 拆解（（）{ 块.close(); }); test('初始状态为0', () { 期望（bloc.state.count，0）； }); blocTest( '当添加 IncrementCounter 时发出 [1]', 构建：() => CounterBloc(), 行为： (bloc) => bloc.add(IncrementCounter()), 期望： () => [const CounterState(1)], ）； blocTest( '当 IncrementCounter 添加两次时发出 [1, 2]', 构建：() => CounterBloc(), 行动：（集团）{ bloc.add(IncrementCounter()); bloc.add(IncrementCounter()); }, 期望：() => [ 常量 CounterState(1), 常量 CounterState(2), ], ）； }); } ### 模式 9：测试 Riverpod 无效主（）{ test('counterProvider初始值为0', () { 最终容器 = ProviderContainer(); addTearDown(container.dispose); 期望(container.read(counterProvider), 0); }); test('counterProvider 可以递增', () { 最终容器 = ProviderContainer(); addTearDown(container.dispose); 容器.read(counterProvider.notifier).state++; 期望(container.read(counterProvider), 1); }); test('userListProvider 加载用户', () async { 最终容器 = ProviderContainer( 覆盖：[ userRepositoryProvider.overrideWithValue(MockUserRepository()), ], ）； addTearDown(container.dispose); // 等待提供者加载等待容器.read(userListProvider.future); 最终用户=container.read(userListProvider).value; 期望（用户，isNotEmpty）； }); } ## 最佳实践 ### 状态管理选择 1. **使用 setState** 实现简单的本地小部件状态 2. **使用InheritedWidget/Provider**进行简单的依赖注入 3. **使用 Riverpod** 实现具有编译时安全性的现代应用程序 4. **使用BLoC**实现复杂的业务逻辑和高可测试性 5. **使用 GetX** 以最少的样板进行快速原型设计 6. **避免混合**多种状态管理解决方案 ### 架构模式 * 将业务逻辑与UI分离 * 使用存储库进行数据访问 * 实施适当的错误处理 * 尽可能使状态不可变 * 独立测试业务逻辑 * 使用依赖注入 * 遵循单一责任原则 * 让小部件专注于 UI ### 性能提示 * 对小部件使用 const 构造函数 * 避免重建整个小部件树 * 使用选择器监听特定状态 * 为状态类实现适当的平等 * 合理配置资源 * 在 Riverpod 中使用 AutoDispose * 使用 DevTools 重建配置文件小部件 ## 资源 * **BLoC 库**： * **Riverpod** ： * **提供商**： * **GetX** : * **Flutter 状态管理** ：

颤振状态管理

包含技能