Flutter状态管理插件replay_riverpod的使用

Flutter状态管理插件replay_riverpod的使用

引言

replay_riverpod 是一个扩展了 riverpod 的插件，它为 riverpod 状态添加了自动的撤销和重做支持。这与 package:replay_bloc 类似。

学习更多关于 replay_riverpod 的信息可以访问 riverpod.dev！

创建一个 ReplayStateNotifier

要创建一个 ReplayStateNotifier，你需要继承 ReplayStateNotifier 并指定状态类型。例如，下面是一个用于管理整数计数器的 CounterNotifier。

class CounterNotifer extends ReplayStateNotifier<int> {
  CounterNotifer() : super(0);

  void increment() => emit(state + 1);
}

使用一个 CounterNotifier

在 main 函数中，你可以创建一个 CounterNotifier 实例，并通过调用其方法来触发状态变化。你还可以使用 undo 和 redo 方法来撤销或重做这些状态变化。

void main() {
  final notifier = CounterNotifer();

  // 触发状态变化
  notifier.increment();
  print(notifier.state); // 输出: 1

  // 撤销状态变化
  notifier.undo();
  print(notifier.state); // 输出: 0

  // 重做状态变化
  notifier.redo();
  print(notifier.state); // 输出: 1
}

使用 ReplayStateNotifierMixin

如果你希望在一个不同的状态管理器（如 HydratedStateNotifier）中使用 ReplayStateNotifier，你可以使用 ReplayStateNotifierMixin。

class CounterNotifier extends HydratedStateNotifier<int> with ReplayStateNotifierMixin {
  CounterNotifier() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);

  [@override](/user/override)
  int fromJson(Map<String, dynamic> json) => json['value'] as int;

  [@override](/user/override)
  Map<String, int> toJson(int state) => {'value': state};
}

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 replay_riverpod 插件来管理一个计数器的状态。

import 'package:flutter/material.dart';
import 'package:replay_riverpod/replay_riverpod.dart';

void main() {
  runApp(ProviderScope(observers: [AppProviderObserver()], child: const App()));
}

/// 自定义的 [ProviderObserver]，观察所有通知器状态的变化。
class AppProviderObserver extends ProviderObserver {
  [@override](/user/override)
  void didUpdateProvider(
    ProviderBase provider,
    Object? previousValue,
    Object? newValue,
    ProviderContainer container,
  ) {
    print('''
{
  "provider": "${provider.name ?? provider.runtimeType}",
  "newValue": "$newValue"
}''');
  }
}

/// {[@template](/user/template) app}
/// 一个 [StatelessWidget]，使用 [replay_riverpod](https://pub.dev/packages/replay_riverpod)
/// 来管理计数器的状态。
/// {[@endtemplate](/user/endtemplate)}
class App extends StatelessWidget {
  /// {[@macro](/user/macro) app}
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CounterPage(),
    );
  }
}

/// {[@template](/user/template) counter_page}
/// 一个 [StatelessWidget]，展示如何消费和与一个 [ReplayStateNotifier] 交互。
/// {[@endtemplate](/user/endtemplate)}
class CounterPage extends ConsumerWidget {
  /// {[@macro](/user/macro) counter_page}
  const CounterPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
        actions: [
          Consumer(
            builder: (context, ref, child) {
              final counter = ref.read(_counterProvider.notifier);
              return IconButton(
                icon: const Icon(Icons.undo),
                onPressed: counter.canUndo ? counter.undo : null,
              );
            },
          ),
          Consumer(
            builder: (context, ref, child) {
              final counter = ref.read(_counterProvider.notifier);
              return IconButton(
                icon: const Icon(Icons.redo),
                onPressed: counter.canRedo ? counter.redo : null,
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Consumer(
          builder: (context, ref, child) {
            final state = ref.watch(_counterProvider);
            return Text('$state', style: textTheme.headline2);
          },
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              ref.read(_counterProvider.notifier).increment();
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () {
              ref.read(_counterProvider.notifier).decrement();
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.delete_forever),
            onPressed: () {
              ref.read(_counterProvider.notifier).reset();
            },
          ),
        ],
      ),
    );
  }
}

/// {[@template](/user/template) replay_counter_notifier}
/// 一个简单的 [ReplayStateNotifier]，管理一个整数状态，并提供了三个公共方法：
/// `increment`，`decrement` 和 `reset` 来操作状态。
/// {[@endtemplate](/user/endtemplate)}
class CounterNotifier extends ReplayStateNotifier<int> {
  /// {[@macro](/user/macro) replay_counter_notifier}
  CounterNotifier() : super(0);

  /// 将 [CounterNotifier] 状态增加 1。
  void increment() => emit(state + 1);

  /// 将 [CounterNotifier] 状态减少 1。
  void decrement() => emit(state - 1);

  /// 将 [CounterNotifier] 状态重置为 0。
  void reset() => emit(0);
}

// 定义一个 StateNotifierProvider，用于提供 CounterNotifier 实例。
final _counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());