Riverpod 是 Flutter 中一个强大的状态管理库,它是 Provider 的改进版,解决了 Provider 的一些限制。以下是 Riverpod 的基本使用方法:

1. 安装依赖

首先在 pubspec.yaml 中添加依赖:

1dependencies:
2  flutter_riverpod: ^2.0.0

然后运行 flutter pub get

2. 基本使用

创建 Provider

1// 创建一个简单的计数器 provider
2final counterProvider = StateProvider<int>((ref) => 0);

在 Widget 中使用

 1import 'package:flutter_riverpod/flutter_riverpod.dart';
 2
 3class CounterPage extends ConsumerWidget {
 4  @override
 5  Widget build(BuildContext context, WidgetRef ref) {
 6    final counter = ref.watch(counterProvider);
 7    
 8    return Scaffold(
 9      body: Center(
10        child: Text('Count: $counter'),
11      ),
12      floatingActionButton: FloatingActionButton(
13        onPressed: () => ref.read(counterProvider.notifier).state++,
14        child: Icon(Icons.add),
15      ),
16    );
17  }
18}

3. Provider 类型

Riverpod 提供了多种类型的 Provider:

StateProvider

用于简单的状态管理:

1final themeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.light);

StateNotifierProvider

用于更复杂的状态管理:

1class CounterNotifier extends StateNotifier<int> {
2  CounterNotifier() : super(0);
3  
4  void increment() => state++;
5  void decrement() => state--;
6}
7
8final counterNotifierProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

FutureProvider

用于异步操作:

1final userDataProvider = FutureProvider<User>((ref) async {
2  return fetchUserData();
3});

StreamProvider

用于流数据:

1final chatMessagesProvider = StreamProvider<List<Message>>((ref) {
2  return chatRoom.messages;
3});

4. 高级用法

Provider 依赖

1final configProvider = Provider<Config>((ref) => Config());
2
3final apiClientProvider = Provider<ApiClient>((ref) {
4  final config = ref.watch(configProvider);
5  return ApiClient(config);
6});

监听 Provider 变化

1ref.listen<int>(counterProvider, (previous, count) {
2  if (count >= 10) {
3    showDialog(context: context, ...);
4  }
5});

组合 Provider

1final userPreferencesProvider = Provider<UserPreferences>((ref) {
2  final theme = ref.watch(themeProvider);
3  final locale = ref.watch(localeProvider);
4  return UserPreferences(theme, locale);
5});

5. 最佳实践

  1. 将 Provider 定义在单独的文件中(如 providers.dart
  2. 对于复杂逻辑,使用 StateNotifierProvider 而不是 StateProvider
  3. 使用 ConsumerWidgetConsumer 来最小化重建范围
  4. 考虑使用 autoDispose 修饰符来避免内存泄漏:
1final tempProvider = StateProvider.autoDispose<int>((ref) => 0);

6. 示例:完整应用

 1import 'package:flutter/material.dart';
 2import 'package:flutter_riverpod/flutter_riverpod.dart';
 3
 4// 定义 Provider
 5final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());
 6
 7class CounterNotifier extends StateNotifier<int> {
 8  CounterNotifier() : super(0);
 9  
10  void increment() => state++;
11  void decrement() => state--;
12}
13
14void main() {
15  runApp(ProviderScope(child: MyApp()));
16}
17
18class MyApp extends StatelessWidget {
19  @override
20  Widget build(BuildContext context) {
21    return MaterialApp(
22      home: CounterPage(),
23    );
24  }
25}
26
27class CounterPage extends ConsumerWidget {
28  @override
29  Widget build(BuildContext context, WidgetRef ref) {
30    final count = ref.watch(counterProvider);
31    final counterNotifier = ref.read(counterProvider.notifier);
32    
33    return Scaffold(
34      appBar: AppBar(title: Text('Riverpod Example')),
35      body: Center(
36        child: Text('Count: $count', style: TextStyle(fontSize: 24)),
37      ),
38      floatingActionButton: Column(
39        mainAxisAlignment: MainAxisAlignment.end,
40        children: [
41          FloatingActionButton(
42            onPressed: counterNotifier.increment,
43            child: Icon(Icons.add),
44          ),
45          SizedBox(height: 10),
46          FloatingActionButton(
47            onPressed: counterNotifier.decrement,
48            child: Icon(Icons.remove),
49          ),
50        ],
51      ),
52    );
53  }
54}

Riverpod 提供了更灵活、更强大的状态管理解决方案,适合各种规模的 Flutter 应用。