【Flutter】状态管理：高级状态管理 (Riverpod, BLoC)

当项目变得更加复杂时，简单的状态管理方式（如 setState() 或 Provider）可能不足以有用地处置惩罚应用中状态的变革和业务逻辑的管理。在这种情况下，高级状态管理框架，如 Riverpod 和 BLoC，可以提供更强大的工具，用于处置惩罚复杂的状态流、逻辑分离以及响应式编程。
在本教程中，我们将深入学习 Riverpod 和 BLoC 这两种高级状态管理框架，理解它们的焦点概念，学会如何将业务逻辑与 UI 分离，并利用 Stream 处置惩罚复杂的状态流。
Riverpod 状态管理框架

Riverpod 是由 Provider 的作者开发的一个更加灵活、强大且范例安全的状态管理框架。相比 Provider，Riverpod 提供了更清楚的状态管理方式，同时制止了一些常见的错误和限制。它支持全局和局部的状态管理，适用于大型应用的开发。
安装 Riverpod

首先，在 pubspec.yaml 文件中添加 riverpod 依靠：

1. dependencies:
2.   flutter:
3.     sdk: flutter
4.   flutter_riverpod: ^2.0.0

复制代码

然后运行 flutter pub get 安装依靠。
Riverpod 焦点概念

在利用 Riverpod 之前，需要相识它的几个焦点概念：

• Provider：是 Riverpod 的根本状态提供者。它可以创建、管理并共享状态。
  
• ConsumerWidget：用于监听 Provider 并响应其状态变革。
  
• StateProvider：提供一种简单的方式来管理和监听状态。
  
• StateNotifier 和 StateNotifierProvider：用于管理复杂的业务逻辑和状态。
  

1. import 'package:flutter/material.dart';
2. import 'package:flutter_riverpod/flutter_riverpod.dart';
4. // 定义一个 StateProvider 来管理状态
5. final counterProvider = StateProvider<int>((ref) => 0);
7. void main() {
8.   runApp(
9.     ProviderScope(
10.       child: MyApp(),
11.     ),
12.   );
13. }
15. class MyApp extends StatelessWidget {
16.   @override
17.   Widget build(BuildContext context) {
18.     return MaterialApp(
19.       home: CounterPage(),
20.     );
21.   }
22. }
24. class CounterPage extends ConsumerWidget {
25.   @override
26.   Widget build(BuildContext context, WidgetRef ref) {
27.     // 通过 ref 读取 counterProvider 的状态
28.     final counter = ref.watch(counterProvider);
30.     return Scaffold(
31.       appBar: AppBar(
32.         title: Text('Riverpod Counter Example'),
33.       ),
34.       body: Center(
35.         child: Column(
36.           mainAxisAlignment: MainAxisAlignment.center,
37.           children: <Widget>[
38.             Text('You have pushed the button this many times:'),
39.             Text(
40.               '$counter',
41.               style: Theme.of(context).textTheme.headline4,
42.             ),
43.           ],
44.         ),
45.       ),
46.       floatingActionButton: FloatingActionButton(
47.         onPressed: () {
48.           // 更新状态
49.           ref.read(counterProvider.notifier).state++;
50.         },
51.         tooltip: 'Increment',
52.         child: Icon(Icons.add),
53.       ),
54.     );
55.   }
56. }

复制代码

代码详解

• StateProvider：counterProvider 是一个 StateProvider，它用于管理整型计数器状态。我们界说了一个初始值 0，并通过 ref.watch 监听状态的变革。
  
• ProviderScope：这是 Riverpod 的焦点组件，用于提供上下文中可访问的状态。ProviderScope 必须在应用的最顶层。
  
• ConsumerWidget：CounterPage 继承自 ConsumerWidget，用于监听状态提供者 counterProvider，并在状态变革时重新构建 UI。
  
• 状态更新：ref.read(counterProvider.notifier).state++ 用于更新状态。这里我们通过 read 方法获取 StateProvider 的 notifier，然后修改其状态。
  

BLoC 状态管理框架

BLoC（Business Logic Component）是一种基于响应式编程的状态管理模式，它通过 Stream 处置惩罚复杂的状态流，实现了业务逻辑和 UI 的完全分离。这种模式适用于大型项目，能够确保代码的可维护性和扩展性。
BLoC 的焦点思想是将变乱流（Event）转换为状态流（State），从而使得业务逻辑独立于界面逻辑。
安装 flutter_bloc

在 pubspec.yaml 文件中添加 flutter_bloc 包依靠：

1. dependencies:
2.   flutter:
3.     sdk: flutter
4.   flutter_bloc: ^8.0.0
5.   bloc: ^8.0.0

复制代码

运行 flutter pub get 安装依靠。
BLoC 焦点概念

• BLoC：用于处置惩罚输入的变乱并输出相应的状态。它封装了业务逻辑和状态转换。
  
• Cubit：Cubit 是 BLoC 的简化版本，通常用于处置惩罚简单的状态变革。
  
• Stream：BLoC 和 Cubit 都依靠 Stream 来传递状态更新。
  
• BlocProvider 和 BlocBuilder：用于提供 BLoC 实例并在 UI 中监听状态变革。
  

示例：利用 Cubit 实现计数器

1. import 'package:flutter/material.dart';
2. import 'package:flutter_bloc/flutter_bloc.dart';
4. // 定义 Cubit，用于管理计数器状态
5. class CounterCubit extends Cubit<int> {
6.   CounterCubit() : super(0);
8.   void increment() => emit(state + 1);  // 更新状态
9. }
11. void main() {
12.   runApp(MyApp());
13. }
15. class MyApp extends StatelessWidget {
16.   @override
17.   Widget build(BuildContext context) {
18.     return MaterialApp(
19.       home: BlocProvider(
20.         create: (context) => CounterCubit(),
21.         child: CounterPage(),
22.       ),
23.     );
24.   }
25. }
27. class CounterPage extends StatelessWidget {
28.   @override
29.   Widget build(BuildContext context) {
30.     return Scaffold(
31.       appBar: AppBar(
32.         title: Text('BLoC Counter Example'),
33.       ),
34.       body: Center(
35.         child: Column(
36.           mainAxisAlignment: MainAxisAlignment.center,
37.           children: <Widget>[
38.             Text('You have pushed the button this many times:'),
39.             BlocBuilder<CounterCubit, int>(
40.               builder: (context, count) {
41.                 return Text(
42.                   '$count',
43.                   style: Theme.of(context).textTheme.headline4,
44.                 );
45.               },
46.             ),
47.           ],
48.         ),
49.       ),
50.       floatingActionButton: FloatingActionButton(
51.         onPressed: () {
52.           // 获取 CounterCubit 实例并调用 increment
53.           context.read<CounterCubit>().increment();
54.         },
55.         tooltip: 'Increment',
56.         child: Icon(Icons.add),
57.       ),
58.     );
59.   }
60. }

复制代码

代码详解

• CounterCubit：Cubit 是 BLoC 的简化版本，用于处置惩罚简单的状态更新。这里我们界说了一个计数器 Cubit，初始状态为 0，并通过 increment() 方法更新状态。
  
• BlocProvider：提供 CounterCubit 实例，并使其在子组件中可访问。
  
• BlocBuilder：用于监听 Cubit 的状态变革，并根据新的状态更新 UI。
  
• 状态更新：通过 context.read<CounterCubit>().increment() 调用 Cubit 的 increment 方法，更新状态。
  

利用 Stream 处置惩罚复杂状态流

在 BLoC 中，Stream 是焦点工具，用于传递状态更新。我们可以将用户的输入变乱（如点击按钮）作为 Stream 的输入，并将业务逻辑的输出作为状态流输出给 UI。
示例：BLoC 处置惩罚多种变乱

1. import 'package:flutter/material.dart';
2. import 'package:flutter_bloc/flutter_bloc.dart';
4. // 定义事件
5. abstract class CounterEvent {}
7. class Increment extends CounterEvent {}
8. class Decrement extends CounterEvent {}
10. // 定义 BLoC 类
11. class CounterBloc extends Bloc<CounterEvent, int> {
12.   CounterBloc() : super(0);
14.   @override
15.   Stream<int> mapEventToState(CounterEvent event) async* {
16.     if (event is Increment) {
17.       yield state + 1;
18.     } else if (event is Decrement) {
19.       yield state - 1;
20.     }
21.   }
22. }
24. void main() {
25.   runApp(MyApp());
26. }
28. class MyApp extends StatelessWidget {
29.   @override
30.   Widget build(BuildContext context) {
31.     return MaterialApp(
32.       home: BlocProvider(
33.         create: (context) => CounterBloc(),
34.         child: CounterPage(),
35.       ),
36.     );
37.   }
38. }
40. class CounterPage extends StatelessWidget {
41.   @override
42.   Widget build(BuildContext context) {
43.     return Scaffold(
44.       app
46. Bar: AppBar(
47.         title: Text('BLoC Stream Example'),
48.       ),
49.       body: Center(
50.         child: Column(
51.           mainAxisAlignment: MainAxisAlignment.center,
52.           children: <Widget>[
53.             Text('You have pushed the button this many times:'),
54.             BlocBuilder<CounterBloc, int>(
55.               builder: (context, count) {
56.                 return Text(
57.                   '$count',
58.                   style: Theme.of(context).textTheme.headline4,
59.                 );
60.               },
61.             ),
62.           ],
63.         ),
64.       ),
65.       floatingActionButton: Row(
66.         mainAxisAlignment: MainAxisAlignment.end,
67.         children: <Widget>[
68.           FloatingActionButton(
69.             onPressed: () {
70.               context.read<CounterBloc>().add(Increment());
71.             },
72.             tooltip: 'Increment',
73.             child: Icon(Icons.add),
74.           ),
75.           SizedBox(width: 10),
76.           FloatingActionButton(
77.             onPressed: () {
78.               context.read<CounterBloc>().add(Decrement());
79.             },
80.             tooltip: 'Decrement',
81.             child: Icon(Icons.remove),
82.           ),
83.         ],
84.       ),
85.     );
86.   }
87. }

复制代码

代码解析

• 变乱范例：CounterEvent 是变乱基类，Increment 和 Decrement 是具体变乱。
  
• CounterBloc 类：BLoC 类负责吸收变乱，并利用 mapEventToState 方法将变乱映射为状态更新流。
  
• BlocProvider 和 BlocBuilder：与之前的 Cubit 示例类似，BlocProvider 提供 CounterBloc 实例，BlocBuilder 监听状态流并更新 UI。
  

---

总结

通过本教程的学习，你已经把握了 Riverpod 和 BLoC 这两种高级状态管理框架。这两种框架都适用于大型项目中的复杂状态管理，能够有用地将业务逻辑与 UI 分离，并通过响应式编程处置惩罚状态流。

• Riverpod 得当范例安全、灵活的状态管理需求，提供简单易用的 API。
  
• BLoC 则非常得当需要严格分离业务逻辑和 UI 的项目，特殊是在需要处置惩罚复杂状态流和多种变乱的情况下。
  

把握这些工具，将帮助你在现实项目中更加高效地管理复杂状态，构建出高质量的 Flutter 应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。