Flutter状态管理插件flutter_action_bloc的使用

Flutter状态管理插件flutter_action_bloc的使用

flutter_action_bloc 是一个用于简化在 Flutter 中使用 action_bloc 的插件。它构建来与以下包一起工作：

• action_bloc - 一个扩展了 bloc 以支持副作用的包。
• action_bloc_test - action_bloc 的测试包。
• flutter_action_bloc_hooks - 扩展了 flutter_action_bloc 以支持 flutter_hooks 的包。
• flutter_bloc_hooks - 扩展了 bloc 以支持 flutter_hooks 的包。

安装

在你的 pubspec.yaml 文件中添加依赖项：

flutter pub add flutter_action_bloc

示例

你可以查看 示例 来了解如何使用该插件。

示例代码

import 'package:action_bloc/action_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_action_bloc/flutter_action_bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() => runApp(const CounterApp());

// 一个计算并发出 FizzBuzz 动作的 Cubit
class CounterCubit extends ActionCubit<int, String> {
  CounterCubit() : super(0);

  void increment() {
    emit(state + 1); // 增加当前状态值

    if (state % 15 == 0) {
      emitAction('FizzBuzz'); // 如果状态能被15整除，则发出 FizzBuzz 动作
    } else if (state % 5 == 0) {
      emitAction('Buzz'); // 如果状态能被5整除，则发出 Buzz 动作
    } else if (state % 3 == 0) {
      emitAction('Fizz'); // 如果状态能被3整除，则发出 Fizz 动作
    }
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider<CounterCubit>(
      create: (context) => CounterCubit(), // 创建 CounterCubit 实例
      child: const MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterCubit>().increment(), // 增加计数
        child: const Icon(Icons.add), // 设置图标为加号
      ),
      body: ActionBlocListener<CounterCubit, String>( // 监听 CounterCubit 发出的动作
        listener: (context, action) {
          final snackBar = SnackBar(
            content: Text('$action'), // 显示动作内容
            duration: Duration(seconds: 2), // 持续时间
            behavior: SnackBarBehavior.floating, // 设置悬浮行为
          );

          ScaffoldMessenger.of(context)
            ..clearSnackBars() // 清除所有 SnackBar
            ..showSnackBar(snackBar); // 显示 SnackBar
        },
        child: BlocBuilder<CounterCubit, int>( // 构建计数器界面
          builder: (context, state) {
            return Center(
              child: Text(
                '$state', // 显示当前计数值
                style: Theme.of(context).textTheme.headline4, // 设置文本样式
              ),
            );
          },
        ),
      ),
    );
  }
}