Flutter多Bloc构建器插件multi_bloc_builder_widget的使用

Flutter多Bloc构建器插件multi_bloc_builder_widget的使用

此插件依赖于flutter_multi_bloc_builder包。它旨在解决使用该功能时遇到的问题，并扩展了额外的功能支持。

开发者在LinkedIn上的账户

LinkedIn链接

一个帮助实现[BLoC模式]的Flutter包。 最好作为扩展与已经提供MultiBlocProvider、MultiBlocListenerX和MultiBlocConsumer的flutter_bloc包一起使用。

此包是为了与bloc一起工作而构建的。

MultiBlocBuilder

MultiBlocBuilder是一个Flutter小部件，它至少需要一个Bloc和一个builder函数。 MultiBlocBuilder负责响应新的状态来构建小部件。

MultiBlocBuilder需要两个参数：

  • blocs: 指定MultiBlocBuilder应该观察哪些Bloc的状态来构建小部件
  • builder: 返回自定义小部件树的匿名函数，每次状态改变都会重建

如何使用：

final bloc1 = BlocProvider.of<MyBloc1>(context);
final bloc2 = BlocProvider.of<MyBloc2>(context);
final bloc3 = BlocProvider.of<MyBloc2>(context);

MultiBlocBuilder(
    blocs: [bloc1, bloc2, bloc3],
    builder: (context, states) {
        final state1 = states.get<MyBloc1State>();
        final state2 = states.get<MyBloc2State>();
        final state3 = states.get<MyBloc3State>();

        if (state1 is Loading || state2 is Loading || state3 is Loading) {
            return Text("Loading");
        } else {
            return Text("SHow some content");
        }
    }
);

MultiBlocListenerX

MultiBlocListenerX是一个Flutter小部件，它至少需要一个Bloc和一个listener函数。 MultiBlocListenerX负责响应新的状态来构建小部件。

MultiBlocListenerX需要三个参数：

  • blocs: 指定MultiBlocListenerX应该观察哪些Bloc的状态来构建小部件
  • listener: 包含您的代码以监听Bloc中的状态变化的匿名函数。每次状态变化时都会触发此函数
  • builder: 返回自定义小部件树的匿名函数，每次状态变化都会重建

如何使用：

final bloc1 = BlocProvider.of<MyBloc1>(context);
final bloc2 = BlocProvider.of<MyBloc2>(context);
final bloc3 = BlocProvider.of<MyBloc2>(context);

MultiBlocListenerX(
    blocs: [bloc1, bloc2, bloc3],
    listener: (context, states) {
        final state1 = states.get<MyBloc1State>();
        final state2 = states.get<MyBloc2State>();
        final state3 = states.get<MyBloc3State>();

        if (state1 is Loading || state2 is Loading || state3 is Loading) {
            // ... Do Something
        } else {
             // ... Do Something
        }
    },
    child: SizedBox.shrink()
);

MultiBlocConsumer

MultiBlocConsumer是一个Flutter小部件，它至少需要一个Bloc和一个listener函数。 MultiBlocConsumer负责响应新的状态来构建小部件。

MultiBlocConsumer需要三个参数：

  • blocs: 指定MultiBlocConsumer应该观察哪些Bloc的状态来构建小部件
  • listener: 具有监听每个状态变化的代码的匿名函数
  • builder: 返回自定义小部件树的匿名函数，每次状态变化都会重建

如何使用：

final bloc1 = BlocProvider.of<MyBloc1>(context);
final bloc2 = BlocProvider.of<MyBloc2>(context);
final bloc3 = BlocProvider.of<MyBloc2>(context);

MultiBlocListener(
blocs: [bloc1, bloc2, bloc3],
listener: (context, states) {
    final state1 = states.get<MyBloc1State>();
    final state2 = states.get<MyBloc2State>();
    final state3 = states.get<MyBloc3State>();

    if (state1 is Loading || state2 is Loading || state3 is Loading) {
        // ... Do Something
    } else {
        // ... Do Something
    }
},
builder: (context, states) {
    final state1 = states.get<MyBloc1State>();
    final state2 = states.get<MyBloc2State>();
    final state3 = states.get<MyBloc3State>();

    if (state1 is Loading || state2 is Loading || state3 is Loading) {
        return Text("Loading");
    } else {
        return Text("SHow some content");
    }
}
);

更多关于Flutter多Bloc构建器插件multi_bloc_builder_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多Bloc构建器插件multi_bloc_builder_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


multi_bloc_builder_widget 是一个用于 Flutter 的插件，它允许你在一个 Widget 中同时监听多个 Bloc 的状态变化。这在需要同时依赖多个 Bloc 的场景下非常有用，可以减少嵌套并提高代码的可读性。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  multi_bloc_builder_widget: ^0.0.1  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

使用

multi_bloc_builder_widget 提供了一个 MultiBlocBuilder 组件，你可以通过它来监听多个 Bloc 的状态变化。

基本用法

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:multi_bloc_builder_widget/multi_bloc_builder_widget.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocBuilder(
      blocs: [
        context.read<BlocA>(),
        context.read<BlocB>(),
      ],
      builder: (context, states) {
        final stateA = states[0] as StateA;
        final stateB = states[1] as StateB;

        // 根据 stateA 和 stateB 来构建 UI
        return Container(
          child: Text('StateA: $stateA, StateB: $stateB'),
        );
      },
    );
  }
}

解释

  1. blocs: 你需要监听的 Bloc 列表。你可以通过 context.read<Bloc>() 来获取 Bloc 实例。
  2. builder: 这是一个回调函数，当任何一个 Bloc 的状态发生变化时都会被调用。states 是一个列表，包含了所有 Bloc 的当前状态，顺序与 blocs 列表中的顺序一致。

高级用法

你可以通过 buildWhen 参数来指定在哪些情况下需要重新构建 Widget。buildWhen 是一个列表，每个元素对应一个 Bloc 的 buildWhen 条件。

MultiBlocBuilder(
  blocs: [
    context.read<BlocA>(),
    context.read<BlocB>(),
  ],
  buildWhen: [
    (previousState, currentState) => currentState is StateA && currentState.shouldRebuild,
    (previousState, currentState) => currentState is StateB && currentState.shouldRebuild,
  ],
  builder: (context, states) {
    final stateA = states[0] as StateA;
    final stateB = states[1] as StateB;

    // 根据 stateA 和 stateB 来构建 UI
    return Container(
      child: Text('StateA: $stateA, StateB: $stateB'),
    );
  },
);
回到顶部