Flutter状态管理插件stateful_bloc的使用

Flutter状态管理插件stateful_bloc的使用

使用场景

Stateful扩展旨在支持通过Bloc实现的数据加载和提交模式。这些模式通常包括以下状态：

• SubjectInitial
• SubjectActionInProgress
• SubjectActionSuccess
• SubjectActionFailure

它们通常被用作如下方式：

• SubjectInitial 是构造函数中设置的initialState
• 当操作被触发时，设置SubjectActionInProgress
• 执行一些逻辑来获取/发送/转换数据
• 根据结果设置SubjectActionSuccess 或 SubjectActionFailure

此扩展抽象了状态类型及其转换，只留下由实现者提供的逻辑。

使用比较

以下是一个通用的cubit示例，它向页面提供状态，允许其显示加载指示器和错误消息。

Cubit

class PageCubit extends Cubit<PageState> { PageCubit() : super(PageStateInitial());

void loadPage() { emit(PageStateLoadInProgress()); try { // 数据加载 emit(PageStateLoadSuccess(/* 数据 */)); } catch(e) { emit(PageStateLoadFailure()); } } } |dart class PageCubit extends Cubit<StatefulState<PageData>> with StatefulCubit { PageCubit() : super(StatefulState());

void loadPage() => load(body: () { // 数据加载 return Outcome.finished(PageData(/* 数据 */)); }); }

#### 状态

| 纯cubit状态 | 带状态的状态 |
| --- | --- |
| ```dart
abstract class PageState extends Equatable {
  [@override](/user/override)
  List<Object> get props => [];
}

class PageStateInitial extends PageState {}

class PageStateLoadInProgress extends PageState {}

class PageStateLoadSuccess extends PageState {
  final String data;

  const LoadSuccess(this.data);

  [@override](/user/override)
  List<Object>? get props => [data];
}

class PageStateLoadFailure extends PageState {}
``` | ```dart
// 用于 StatefulState<PageData>
class PageData extends Equatable {
  final String data;

  const PageData(this.data);

  [@override](/user/override)
  List<Object>? get props => [data];
}
``` |

### 优势

使用Stateful扩展的主要优势：

- **简化Cubit/Bloc** - 你不必担心状态，只需关注逻辑和更改的数据。
- **简化状态** - 不再需要为每个组件重复相同的继承树，只需关注提供的数据。
- **统一的状态类型** - 除了标准化本身之外，这使得更容易在多个UI组件之间重用状态依赖的小部件（例如，在`ActionStatus.ongoing`上显示加载指示器或在`ActionStatus.failed`上显示错误消息）。

### 维护者

- [Stanisław Góra](https://github.com/stasgora/)

### 许可证

此库是在[MIT许可证](https://github.com/stasgora/round-spot/blob/master/LICENSE)下授权的。

---

### 完整示例Demo

以下是完整的示例代码：

```dart
import 'package:bloc/bloc.dart';
import 'package:stateful_bloc/stateful_bloc.dart';

class SimpleBlocObserver extends BlocObserver {
  [@override](/user/override)
  void onEvent(Bloc bloc, Object? event) {
    super.onEvent(bloc, event);
    print('onEvent: ${bloc.runtimeType}, event: $event');
  }

  [@override](/user/override)
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('onChange: ${bloc.runtimeType}, change: $change');
  }
}

class TestCubit extends Cubit<StatefulState<int>> with StatefulCubit {
  TestCubit() : super(StatefulState(data: 0));

  void successfullyLoad() => load(body: () => Outcome.finished(1));

  void failToSubmit() => submit(body: () => Outcome.failed());
}

enum Event { successfullyLoad, failToSubmit }

class TestBloc extends Bloc<Event, StatefulState<int>> with StatefulBloc {
  TestBloc() : super(StatefulState(data: 0));

  [@override](/user/override)
  Stream<StatefulState<int>> mapEventToState(Event event) async* {
    if (event == Event.successfullyLoad) {
      yield* load(body: () => Outcome.finished(1));
    } else if (event == Event.failToSubmit) {
      yield* submit(body: () => Outcome.failed());
    }
  }
}

void main() async {
  Bloc.observer = SimpleBlocObserver();

  var cubit = TestCubit();
  cubit.successfullyLoad();
  await Future.delayed(Duration.zero);
  cubit.failToSubmit();
  await Future.delayed(Duration.zero);

  var bloc = TestBloc();
  bloc.add(Event.successfullyLoad);
  bloc.add(Event.failToSubmit);
}