Flutter效果管理插件bloc_effects的使用

bloc_effects 是一个为 Cubit 和 Bloc 提供单次事件（SingleLiveEvent）模式实现的库，它使得在 BLoC 状态管理中添加 UI 效果变得简单。本文将详细介绍如何使用 bloc_effects 插件来管理和响应应用中的 UI 效果。

使用方法

1. 定义UI效果类

首先，我们需要定义一些表示 UI 效果的类。这些类应该继承自 UiEffect 抽象类。例如：

abstract class UiEffect {}

class ShowBottomSheet implements UiEffect {
  const ShowBottomSheet({required this.counterValue});
  
  final int counterValue;
}

2. 创建带有 Effects 的 Cubit 或 Bloc

接下来，创建一个 Cubit 或 Bloc，并通过混合 Effects<UiEffect> 或扩展 CubitWithEffects<int, UiEffect> 来分发效果。下面是一个简单的计数器 Cubit 示例：

// 方法一：使用 mixin
class CounterCubit extends Cubit<int> with Effects<UiEffect> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);

  void onButtonPressed() => emitEffect(ShowBottomSheet(counterValue: state));
}

// 方法二：直接继承 CubitWithEffects
class CounterCubit extends CubitWithEffects<int, UiEffect> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);

  void onButtonPressed() => emitEffect(ShowBottomSheet(counterValue: state));
}

3. 在页面中监听并响应效果

最后，在需要的地方使用 BlocEffectListener 来监听和响应这些效果。这里以 CounterPage 为例：

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocEffectListener<CounterCubit, UiEffect>(
        listener: (context, effect) {
          if (effect is ShowBottomSheet) {
            showBottomSheet<void>(
              context: context,
              builder: (c) =>
                  Material(
                    child: Container(
                      color: Colors.black12,
                      height: 150,
                    ),
                  ),
            );
          }
        },
        child: const SizedBox(),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.upload),
        onPressed: () => context.read<CounterCubit>().onButtonPressed(),
      ),
    );
  }
}

此外，还可以通过自定义 BlocObserver 来全局观察所有 bloc 发出的效果：

class AppBlocObserver extends BlocWithEffectsObserver {
  @override
  void onEffect(Object effect) {
    super.onEffect(effect);
    debugPrint('Used effect: $effect');
  }
  // 其他 [BlocObserver] 覆盖的方法
}

完整示例代码

为了更清晰地展示整个流程，这里给出一个完整的 Demo 应用程序代码：

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

void main() {
  Bloc.observer = AppBlocObserver();
  runApp(const MyApp());
}

abstract class DemoEffect {}

class ShowBottomSheet implements DemoEffect {
  const ShowBottomSheet();
}

class DemoCubit extends Cubit<void> with Effects<DemoEffect> {
  DemoCubit() : super(null);

  void onButtonPressed() => emitEffect(const ShowBottomSheet());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late DemoCubit _demoCubit;

  @override
  void initState() {
    super.initState();
    _demoCubit = DemoCubit();
  }

  @override
  void dispose() {
    _demoCubit.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BlocEffectListener<DemoCubit, DemoEffect>(
          effector: _demoCubit,
          listener: (context, effect) {
            if (effect is ShowBottomSheet) {
              showBottomSheet(
                context: context,
                builder: (c) => Material(
                  child: Container(
                    color: Colors.black12,
                    height: 150,
                  ),
                ),
              );
            }
          },
          child: Center(
            child: ElevatedButton(
              onPressed: _demoCubit.onButtonPressed,
              child: const Icon(Icons.upload),
            ),
          ),
        ),
      ),
    );
  }
}

class AppBlocObserver extends BlocWithEffectsObserver {
  @override
  void onEffect(Object effect) {
    super.onEffect(effect);
    debugPrint('Used effect: $effect');
  }
}

以上就是关于 bloc_effects 插件的基本使用介绍，希望对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。