Flutter状态管理插件flutter_state_management的使用

Flutter State Management

flutter_state_management 是一个简单的状态管理插件，它基于 Flutter 框架内置的 ChangeNotifier 和 Listenable 类。这个插件旨在简化状态管理的使用，同时保持轻量级，避免引入不必要的复杂性。

特点

• 无需额外学习曲线：如果你已经熟悉 Flutter，那么使用这个插件非常简单。
• 基于 ChangeNotifier 的简单包：没有多余的依赖和复杂的配置。

使用方法

创建模型类

你可以创建一个继承自 StateNotifier 或 PersistedStateNotifier 的模型类来管理状态。

示例：不持久化的状态管理

class Counter extends StateNotifier<int, String> {
  Counter() : super(const Active(data: 0));

  void increment() async {
    setWaiting(data: data);

    await Future.delayed(const Duration(seconds: 2));

    if (data > 20) {
      setFailed('greater than 20', data: data);
    } else {
      setActive(data: data + 1);
    }
  }
}

示例：持久化的状态管理

如果你想在应用重启后仍然保留状态，可以使用 PersistedStateNotifier。

class Counter extends PersistedStateNotifier<int, String> {
  Counter() : super(IsarKeyValueStore(), startState: 0);

  void increment() async {
    persistedState = Waiting(data: data);

    await Future.delayed(const Duration(seconds: 2));

    if (data > 20) {
      persistedState = Failed('greater than 20', data: data);
    } else {
      persistedState = Active(data: data + 1);
    }
  }
}

在UI中处理状态变化

只重新构建特定部分

1. 使用 Flutter 框架中的 ValueListenableBuilder：

final counter = Counter();

ValueListenableBuilder(
  valueListenable: counter,
  builder: (context, state, child) {
    return Text(state.data.toString());
  },
  child: const Text('Hello'),
);

你也可以使用 builderArg 辅助函数：

builder: counter.builderArg(
  onActive: (context, data) => Text(data.toString()),
  onWaiting: (context, data) => const CircularProgressIndicator(),
  onNone: (context, data) => const Text('None'),
  onFailure: (context, error, data) => Text('Error: $error'),
),

1. 使用 StateNotifierBuilder（更用户友好）：

final counter = Counter();

counter.builder(
  onActive: (context, data) => Text(data.toString()),
  onWaiting: (context, data) => const CircularProgressIndicator(),
  onNone: (context, data) => const Text('None'),
  onFailure: (context, error, data) => Text('Error: $error'),
);

重新构建整个小部件

将现有的 StatelessWidget 转换为 RStatelessWidget，将 StatefulWidget 转换为 RStatefulWidget，并在 build 方法中调用 watch 方法来监听模型：

class CounterText extends RStatelessWidget {
  @override
  Widget build(BuildContext context) {
    counter.watch(context); // 在 build 方法中调用 watch
    return Text(counter.data.toString());
  }
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_state_management 插件来管理状态：

import 'package:flutter/material.dart';
import 'package:flutter_state_management/flutter_state_management.dart';
import 'package:isar_key_value/isar_key_value.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final counter = createCounter();

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('You have pushed the button this many times:'),
              counter.builder(
                selector: (counter) => counter.data,
                onActive: (context, data) => Text(
                  data.toString(),
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
                onWaiting: (_, __) => const CircularProgressIndicator(),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: counter.increment,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

final createCounter = CreateNotifier((arg) => Counter());

class Counter extends PersistedStateNotifier<int, int> {
  Counter() : super(IsarKeyValueStore(), startState: 0);

  // 重写持久化键对于版本控制或区分相同类型的模型很有用
  @override
  String get key => '$runtimeType.1';

  void increment() async {
    setWaiting();
    await Future.delayed(const Duration(seconds: 2));
    setActive(data + 1);
  }
}

class IntCounter extends StateNotifier<int, Error> {
  IntCounter() : super(const Active(data: 0));

  void increment() async {
    setActive(data);

    await Future.delayed(const Duration(seconds: 2));

    if (data > 20) {
      setFailed(StateError('greater than 20'));
    } else {
      setActive(data + 1);
    }
  }
}

class IsarKeyValueStore extends IsarKeyValue implements KeyValueStore {}

通过以上示例，你可以看到如何使用 flutter_state_management 插件来管理应用的状态，并在 UI 中响应状态的变化。希望这个示例对你有所帮助！