Flutter插件bloobit的使用_Bloobit 是一种状态管理方法，灵感来源于 BloC 模式

Flutter插件bloobit的使用_Bloobit 是一种状态管理方法，灵感来源于 BloC 模式

Bloobit 是一种状态管理方法，灵感来源于 BloC 模式，但默认情况下不使用流（或观察者模式）。Bloobit 和 BloC 模式都旨在将展示逻辑与业务逻辑分离，但 Bloobit 并不是 BloC 模式的实现。当你需要改变状态时，只需调用 setState() 即可。没有魔法，只有大约 100 行代码，具体取决于如何计算。你可以阅读并理解这些代码。

如果你需要遵循 BloC 模式，我推荐使用 Cubit 在 Bloc 库 中。

Bloobit 目前处于测试阶段，但正在接近全面发布。

实现业务逻辑

通过扩展 <code>Bloobit<TState> 类，并通过方法发送消息或事件到 <code>Bloobit。当状态变化时，调用 <code>setState()。

/// 这个类扩展了 `Bloobit` 并通过方法实现了业务逻辑。
/// 当状态变化时，我们调用 `setState()`
class AppBloobit extends Bloobit<AppState> {
  int get callCount => state.callCount;
  bool get isProcessing => state.isProcessing;
  bool get displayWidgets => state.displayWidgets;

  final CountServerService countServerService;

  AppBloobit(this.countServerService, {void Function(AppState)? onSetState})
      : super(const AppState(0, false, true), onSetState: onSetState);

  void hideWidgets() {
    setState(state.copyWith(displayWidgets: false));
  }

  Future<void> callGetCount() async {
    setState(state.copyWith(isProcessing: true));

    final callCount = await countServerService.getCallCount();

    setState(state.copyWith(isProcessing: false, callCount: callCount));
  }
}

状态

我们通常使用不可变状态，但也可以使用可变状态。Bloobit 对此没有偏好。Bloobit 只是 setState() 的一个包装器。

/// 应用程序的不可变状态
@immutable
class AppState {
  final int callCount;
  final bool isProcessing;
  final bool displayWidgets;

  const AppState(
    this.callCount,
    this.isProcessing,
    this.displayWidgets,
  );

  AppState copyWith({
    int? callCount,
    bool? isProcessing,
    bool? displayWidgets,
  }) =>
      AppState(
        callCount ?? this.callCount,
        isProcessing ?? this.isProcessing,
        displayWidgets ?? this.displayWidgets,
      );
}

你可以轻松地在 widget 树中检查状态和 Bloobit 使用开发工具。查看下一节关于 <code>BloobitPropagator 的内容。

BloobitWidget

这是使用 Bloobit 的最简单方式。将 <code>BloobitWidget> 放入树中，并像这样实例化你的 <code>Bloobit>。查看第二个示例以了解如何使用依赖注入和 <a href="https://pub.dev/packages/ioc_container">ioc_container</a> 使用 Bloobit。

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Bloobit Sample',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: BloobitWidget<AppBloobit>(
          bloobit: AppBloobit(),
          builder: (context, bloobit) => MyHomePage(
            title: 'Bloobit Sample',
            bloobit: bloobit,
          ),
        ),
      );
}

在 widget 树中暴露 Bloobit

如果你想嵌套 widget，你需要将 widget 包裹在 <code>BloobitPropagator> 中。这是一个 <a href="https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html">InheritedWidget</a>。BloobitPropagator 将把 Bloobit 传递给子节点。

class MyApp extends StatelessWidget {
  final IocContainer container;

  const MyApp(this.container, {super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BloobitPropagator<AppBloobit>(
        bloobit: container.get<AppBloobit>(),
        child: const Home(),
      ),
    );
  }
}

访问 Bloobit

你可以在 <code>BloobitPropagator> 下的任何 widget 中访问 <code>Bloobit>。使用 <a href="https://pub.dev/documentation/bloobit/latest/bloobit/BloobitPropagator/of.html"><code>BloobitPropagator.of</code></a>。

class CounterDisplay extends StatelessWidget {
  const CounterDisplay({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bloobit = BloobitPropagator.of<AppBloobit>(context).bloobit;
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        height: 200,
        width: 200,
        color: const Color(0xFFEEEEEE),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            if (bloobit.isProcessing)
              const CircularProgressIndicator()
            else
              Text(
                '${bloobit.callCount}',
                style: Theme.of(context).textTheme.headline4,
              ),
          ],
        ),
      ),
    );
  }
}

转换为流

Bloobit 设计用于仅与一个 <code>StatefulWidget> 一起工作。正如你在示例中看到的，你不需要多个 <code>StatefulWidget> 来驱动多个子 widget。Bloc 旨在处理许多情况，但大多数时候并不需要使用多个 <code>StatefulWidget>。然而，你可以从 <code>Bloobit> 流式传输状态更改，并使用 <a href="https://pub.dev/packages/ioc_container">ioc_container</a> 包来连接多个监听器。查看示例文件夹中的流式传输代码。你可以使用 [StreamBuilder](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html) 或其他多个 <code>StatefulWidget>。

void main() {
  // 注册服务和视图模型到 IoC 容器
  final builder = IocContainerBuilder()
    // 一个简单的单例服务来模拟服务器计数调用
    ..addSingletonService(CountServerService())
    // 添加一个 AppState 更改的流
    ..addStream<AppState>()
    // Bloobit
    ..addSingleton((con) => AppBloobit(con.get<CountServerService>(),
        onSetState: (s) =>
            // 将状态更改流式传输到 AppState 流
            con.get<StreamController<AppState>>().add(s)));

  var container = builder.toContainer();

  container
      .get<Stream<AppState>>()
      // 将状态更改流式传输到调试控制台
      .listen((appState) => debugPrint(appState.callCount.toString()));

  runApp(MyApp(container));
}