Flutter状态管理架构插件bloc_widget_arch的使用

Flutter状态管理架构插件bloc_widget_arch的使用

概述

Bloc Widget Architecture 是一种用于构建 Flutter 应用的强大且有组织的方法。该插件提供了一系列抽象类和工具，无缝集成到 BLoC 模式中，使你能够创建清晰且可维护的代码。

重要提示

注意: 此包要求 iOS 版本为 10.3 或更高版本才能兼容。

功能

• BaseArchBloc: BaseArchBloc 是 Bloc Widget Architecture 的核心抽象类。它是用于结构化与 BLoC 交互的 widget 的蓝图。通过扩展此类，你可以创建响应 BLoC 事件并根据状态变化高效更新 UI 的 widget。

• StatefulBlocWidget: StatefulBlocWidget 是一个专为与 BLoC 交互设计的状态fulWidget。继承自这个类，你可以轻松地将你的 BLoC 与 widget 结合在一起，同时保持代码库模块化和干净。

• StatelessBlocWidget: StatelessBlocWidget 用于创建与 BLoC 协同工作的无状态 widget。通过继承这个抽象类，简化了将 BLoC 集成到 widget 中的过程，并确保你的 UI 始终响应和最新。

使用方法

BaseArchBloc

// 定义一个继承自BaseArchBloc的Bloc
class ScreenBloc extends BaseArchBloc<ScreenState> {
  ScreenBloc()
      : super(
    ScreenState(
      someInt: 0,
    ),
  );

  @override
  EventBus get eventBus => Modular.get<EventBus>();

  @override
  void registerEvents() {
    super.registerEvents();
    listen<SomeEvent>((event) {
      updateState(
        state.copyWith(
          someInt: state.someInt + 1,
        ),
      );
    });
  }
}

// 定义一个状态类
class ScreenState {
  final int someInt;

  ScreenState({required this.someInt});
}

// 扩展状态类以支持拷贝
extension ScreenStateCopyWith on ScreenState {
  ScreenState copyWith({
    int? someInt,
  }) {
    return ScreenState(
      someInt: someInt ?? this.someInt,
    );
  }
}

// 定义一个事件类
class SomeEvent {}

StatefulBlocWidget

// 定义一个继承自StatefulBlocWidget的无状态widget
class ScreenStatefulBlocWidget extends StatefulBlocWidget {
  const ScreenStatefulBlocWidget({super.key, required this.someString});
  
  final String someString;

  @override
  State<StatefulBlocWidget> createState() => ScreenStatefulBlocWidgetState();
}

// 定义一个状态类
class ScreenStatefulBlocWidgetState
    extends StatefulBlocWidgetState<ScreenBloc, ScreenState> {
  ScreenStatefulBlocWidget get customWidget => widget as ScreenStatefulBlocWidget;

  @override
  ScreenBloc get bloc => Modular.get<ScreenBloc>();
  
  // 设置状态对象、控制器等

  @override
  Widget onBuild(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BlocWidgetArch'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              customWidget.someString,
              style: const TextStyle(fontSize: 18.0),
            ),
          ),
          Center(
            child: Text(
              bloc.state.someInt.toString(),
              style: const TextStyle(fontSize: 16.0),
            ),
          ),
          const SizedBox(
            height: 24.0,
          ),
          ElevatedButton(
            onPressed: () {
              bloc.eventBus.fire(SomeEvent());
            },
            child: const Text('press me'),
          ),
        ],
      ),
    );
  }
}

StatelessBlocWidget

// 定义一个继承自StatelessBlocWidget的无状态widget
class Screen extends StatelessBlocWidget<ScreenBloc, ScreenState> {
  const Screen({super.key});

  @override
  get bloc => Modular.get<ScreenBloc>();

  @override
  Widget onBuild(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BlocWidgetArch'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              bloc.state.someInt.toString(),
              style: const TextStyle(fontSize: 18.0),
            ),
          ),
          const SizedBox(
            height: 24.0,
          ),
          ElevatedButton(
            onPressed: () {
              bloc.eventBus.fire(SomeEvent());
            },
            child: const Text('press me'),
          ),
        ],
      ),
    );
  }
}

开始使用

要开始使用该包，请确保你已经安装了必要的依赖项。通常情况下，你需要在 pubspec.yaml 文件中添加 bloc_widget_arch 和 flutter_modular 依赖。

dependencies:
  flutter:
    sdk: flutter
  bloc_widget_arch: ^x.x.x
  flutter_modular: ^x.x.x