【Flutter】状态管理：高级状态管理 (Riverpod, BLoC)
当项目变得更加复杂时，简单的状态管理方式（如 setState() 或 Provider）可能不足以有用地处置惩罚应用中状态的变革和业务逻辑的管理。在这种情况下，高级状态管理框架，如 Riverpod 和 BLoC，可以提供更强大的工具，用于处置惩罚复杂的状态流、逻辑分离以及响应式编程。在本教程中，我们将深入学习 Riverpod 和 BLoC 这两种高级状态管理框架，理解它们的焦点概念，学会如何将业务逻辑与 UI 分离，并利用 Stream 处置惩罚复杂的状态流。
Riverpod 状态管理框架
Riverpod 是由 Provider 的作者开发的一个更加灵活、强大且范例安全的状态管理框架。相比 Provider，Riverpod 提供了更清楚的状态管理方式，同时制止了一些常见的错误和限制。它支持全局和局部的状态管理，适用于大型应用的开发。
安装 Riverpod
首先，在 pubspec.yaml 文件中添加 riverpod 依靠：
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.0.0
然后运行 flutter pub get 安装依靠。
Riverpod 焦点概念
在利用 Riverpod 之前，需要相识它的几个焦点概念：
[*]Provider：是 Riverpod 的根本状态提供者。它可以创建、管理并共享状态。
[*]ConsumerWidget：用于监听 Provider 并响应其状态变革。
[*]StateProvider：提供一种简单的方式来管理和监听状态。
[*]StateNotifier 和 StateNotifierProvider：用于管理复杂的业务逻辑和状态。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// 定义一个 StateProvider 来管理状态
final counterProvider = StateProvider<int>((ref) => 0);
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// 通过 ref 读取 counterProvider 的状态
final counter = ref.watch(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('Riverpod Counter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
Text(
'$counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 更新状态
ref.read(counterProvider.notifier).state++;
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
代码详解
[*] 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 包依靠：
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^8.0.0
bloc: ^8.0.0
运行 flutter pub get 安装依靠。
BLoC 焦点概念
[*]BLoC：用于处置惩罚输入的变乱并输出相应的状态。它封装了业务逻辑和状态转换。
[*]Cubit：Cubit 是 BLoC 的简化版本，通常用于处置惩罚简单的状态变革。
[*]Stream：BLoC 和 Cubit 都依靠 Stream 来传递状态更新。
[*]BlocProvider 和 BlocBuilder：用于提供 BLoC 实例并在 UI 中监听状态变革。
示例：利用 Cubit 实现计数器
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// 定义 Cubit，用于管理计数器状态
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);// 更新状态
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CounterCubit(),
child: CounterPage(),
),
);
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BLoC Counter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
BlocBuilder<CounterCubit, int>(
builder: (context, count) {
return Text(
'$count',
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 获取 CounterCubit 实例并调用 increment
context.read<CounterCubit>().increment();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
代码详解
[*] CounterCubit：Cubit 是 BLoC 的简化版本，用于处置惩罚简单的状态更新。这里我们界说了一个计数器 Cubit，初始状态为 0，并通过 increment() 方法更新状态。
[*] BlocProvider：提供 CounterCubit 实例，并使其在子组件中可访问。
[*] BlocBuilder：用于监听 Cubit 的状态变革，并根据新的状态更新 UI。
[*] 状态更新：通过 context.read<CounterCubit>().increment() 调用 Cubit 的 increment 方法，更新状态。
利用 Stream 处置惩罚复杂状态流
在 BLoC 中，Stream 是焦点工具，用于传递状态更新。我们可以将用户的输入变乱（如点击按钮）作为 Stream 的输入，并将业务逻辑的输出作为状态流输出给 UI。
示例：BLoC 处置惩罚多种变乱
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// 定义事件
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}
// 定义 BLoC 类
class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc() : super(0);
@override
Stream<int> mapEventToState(CounterEvent event) async* {
if (event is Increment) {
yield state + 1;
} else if (event is Decrement) {
yield state - 1;
}
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CounterBloc(),
child: CounterPage(),
),
);
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
app
Bar: AppBar(
title: Text('BLoC Stream Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pushed the button this many times:'),
BlocBuilder<CounterBloc, int>(
builder: (context, count) {
return Text(
'$count',
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: () {
context.read<CounterBloc>().add(Increment());
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () {
context.read<CounterBloc>().add(Decrement());
},
tooltip: 'Decrement',
child: Icon(Icons.remove),
),
],
),
);
}
}
代码解析
[*] 变乱范例：CounterEvent 是变乱基类，Increment 和 Decrement 是具体变乱。
[*] CounterBloc 类：BLoC 类负责吸收变乱，并利用 mapEventToState 方法将变乱映射为状态更新流。
[*] BlocProvider 和 BlocBuilder：与之前的 Cubit 示例类似，BlocProvider 提供 CounterBloc 实例，BlocBuilder 监听状态流并更新 UI。
总结
通过本教程的学习，你已经把握了 Riverpod 和 BLoC 这两种高级状态管理框架。这两种框架都适用于大型项目中的复杂状态管理，能够有用地将业务逻辑与 UI 分离，并通过响应式编程处置惩罚状态流。
[*]Riverpod 得当范例安全、灵活的状态管理需求，提供简单易用的 API。
[*]BLoC 则非常得当需要严格分离业务逻辑和 UI 的项目，特殊是在需要处置惩罚复杂状态流和多种变乱的情况下。
把握这些工具，将帮助你在现实项目中更加高效地管理复杂状态，构建出高质量的 Flutter 应用。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]