发布于 
pv: - | uv: -

Riverpod - flutter 状态管理的应用

前言

Riverpod 是 Flutter 下知名度较高的状态管理依赖,同样出自 Provider 的开发者 rrousselGit 之手。

其实仔细去看 Riverpod 似乎只是 Provider 的拼写打乱了顺序,其提供了更简洁的API 设计,实现了依赖注入。

如果去看过 rrousselGit 的主页,你可以发现,他也是著名的 Flutter_hooks 的作者,RiverPod 也理所当然的拥有 hook 相关的血统 > HookConsumerWidget, 我们可以在享受 hooks 的同时,直接使用Widget.ref(provider).watch 来监听变更并自动刷新页面。

为什么 Flutter 需要状态管理

Flutter 作为优秀的跨端框架,其使用的声明式UI有诸多优势,但嵌套的组件给数据传递带来了极大的挑战。

如果将数据在 组件类的构造函数中携带,并在数层中进行传递,随着代码量的提升,将会极大的增加代码的复杂和易理解程度。

因此状态管理组件出现了,其提供了一个清晰的模型来管理数据流,确保数据在正确的时机以正确的方式流动。这有助于避免数据不一致和难以追踪的 bug。通过集中的状态管理,我们可以更加容易的理解和增删需要传递的数据。

举个例子

我们可以使用最常见的 Flutter demo 来看, 在初始化完成项目之后,我们便可以看到这个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

因为 需要渲染的页面和按钮在 同一个组件 MyHomePage 下 因此我们可以很简单的在按钮点击的同时 setState 来使Flutter 感知数据的变化 并重新渲染页面。

组件分离

但是 多数情况下, 我们需要渲染的页面,和改变数据的按钮 并不在一个组件中,例如,如果我们将这个按钮单独封装在一个类中。这种情况下,我们应该如何在点击按钮的时候增加数据呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'${_counter._count}',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: const Button(),
);
}
}

class Button extends StatelessWidget {
const Button({super.key});

@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: _counter.increment,
tooltip: 'Increment',
child: const Icon(Icons.add),
);
}
}

使用 ChangeNotify

ChangeNotify 是 Flutter 下用于监听数据变更的组件,在这个场景下,我们可以使用其监听 counter 的变化, 并重新渲染页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class Counter extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}

Counter _counter = Counter();
......

class _MyHomePageState extends State<MyHomePage> {

@override
void dispose() {
_counter.dispose();
super.dispose();
}

@override
void initState() {
super.initState();
_counter.addListener(() {
setState(() {});
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'${_counter._count}',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: const Button(),
);
}
}
......

使用 RiverPod

再简单场景下,ChangeNotifyValueNotify 已经能够胜任, 但对于复杂场景,还是有一定的局限性。

先添加如下依赖 (这里使用 Flutter_hooks 举例)

1
2
3
4
5
6
7
8
dependencies:
flutter_hooks: ^0.20.5
hooks_riverpod: ^2.5.1
riverpod_annotation: ^2.3.5

dev_dependencies:
build_runner: ^2.4.11
riverpod_generator: ^2.4.0

别忘记在最外围增加一个 ProvideScope

1
2
3
void main() {
runApp(const ProviderScope(child: MyApp()));
}

接着新增一个 counter_provider.dart 文件

1
2
3
4
5
6
7
8
9
10
11
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'counter_provider.g.dart';

@Riverpod(keepAlive: true)
class Counter extends _$Counter {
@override
int build() => 0;
void increment() {
state++;
}
}

运行 代码生成

1
$ dart run build_runner build

他将会生成一个 counter_provider.g.dart 文件

1
2
3
4
// 接着我们可以使用 `ref.watch` 来监听数据的变化
ref.watch(counterProvider);
// 使用 ref.read().increment() 增加1
ref.read(counterProvider.notifier).increment;

完整的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import 'package:daka/counter_provider.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}

class MyHomePage extends HookConsumerWidget {
const MyHomePage({super.key});

@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
ref.watch(counterProvider).toString(),
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: const Button(),
);
}
}

class Button extends HookConsumerWidget {
const Button({super.key});

@override
Widget build(BuildContext context, WidgetRef ref) {

final counter = ref.read(counterProvider.notifier);

return FloatingActionButton(
onPressed: counter.increment,
tooltip: 'Increment',
child: const Icon(Icons.add),
);
}
}