Flutter事件监听插件bloc_action_listener的使用

Flutter事件监听插件bloc_action_listener的使用

为什么使用这个包？

在许多情况下，您可能希望您的UI响应那些不一定与状态变化相关的操作。例如：

• 显示对话框
• 显示SnackBar
• 导航到不同的屏幕或路由

使用“Bloc Action Listener”，您可以更方便地实现这些功能。

开始使用

1. 定义您的动作

您可以根据需要创建动作。这些动作将被分发并在UI中监听。

abstract class ExampleAction {}

class ShowTestDialogAction extends ExampleAction {
  final String title;
  final String content;

  ShowTestDialogAction({
    required this.title,
    required this.content,
  });
}

class ShowSnackbarAction extends ExampleAction {
  final String content;

  ShowSnackbarAction({required this.content});
}

2. 扩展您的Bloc或Cubit

使用 BlocActionsMixin 来扩展您的 Bloc 或 Cubit。这个 mixin 提供了 addAction() 方法，允许您分发定义的动作。

class ExampleCubit extends Cubit<ExampleState> with BlocActionsMixin<ExampleState, ExampleAction> {
  ExampleCubit() : super(ExampleInitial());

  void onShowTestDialogPressed() {
    addAction(
      ShowTestDialogAction(
        title: 'Test dialog',
        content: 'Test dialog message',
      ),
    );
  }

  void onShowTestSnackbarPressed() {
    addAction(ShowSnackbarAction(content: 'Test snackbar message'));
  }
}

3. 在UI中监听和处理动作

使用 BlocActionListener 小部件，您可以在UI中响应分发的动作。

BlocActionListener<ExampleCubit, ExampleAction>(
  listener: (context, action) {
    if (action is ShowTestDialogAction) {
      final title = action.title;
      final content = action.content;
      showDialog(
        context: context,
        builder: (context) => AlertDialog(title: Text(title), content: Text(content)),
      );
    }
    if (action is ShowSnackbarAction) {
      final content = action.content;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(content)));
    }
  },
);

完整示例Demo

以下是一个完整的示例，展示了如何使用 bloc_action_listener 插件来实现显示对话框和SnackBar的功能。

import 'package:bloc_action_listener/bloc_action_listener.dart';
import 'package:bloc_action_listener/bloc_actions_mixin.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// 定义动作
abstract base class ExampleAction {}

final class ShowTestDialogAction extends ExampleAction {
  final String title;
  final String content;

  ShowTestDialogAction({
    required this.title,
    required this.content,
  });
}

final class ShowSnackbarAction extends ExampleAction {
  final String content;

  ShowSnackbarAction({required this.content});
}

// 定义状态
[@immutable](/user/immutable)
abstract class ExampleState {}

class ExampleInitial extends ExampleState {}

// 创建Cubit并扩展BlocActionsMixin
class ExampleCubit extends Cubit<ExampleState> with BlocActionsMixin<ExampleState, ExampleAction> {
  ExampleCubit() : super(ExampleInitial());

  void onShowTestDialogPressed() {
    addAction(
      ShowTestDialogAction(
        title: 'Test dialog',
        content: "Test dialog message",
      ),
    );
  }

  void onShowTestSnackbarPressed() {
    addAction(ShowSnackbarAction(content: "Test snackbar message"));
  }
}

void main() {
  runApp(const App());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: HomePage());
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocProvider(
        create: (_) => ExampleCubit(),
        child: BlocActionListener<ExampleCubit, ExampleAction>(
          listener: (context, action) {
            if (action is ShowTestDialogAction) {
              final title = action.title;
              final content = action.content;
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text(title),
                  content: Text(content),
                ),
              );
            }
            if (action is ShowSnackbarAction) {
              final content = action.content;
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(content)));
            }
          },
          child: Builder(builder: (context) {
            final cubit = context.read<ExampleCubit>();
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  child: ElevatedButton(
                    onPressed: cubit.onShowTestDialogPressed,
                    child: const Text("Show test dialog"),
                  ),
                ),
                const SizedBox(height: 16),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: cubit.onShowTestSnackbarPressed,
                    child: const Text("Show test snackbar"),
                  ),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }
}