Flutter状态管理钩子插件flutter_action_bloc_hooks的使用

Flutter 的 flutter_action_bloc_hooks 是一个用于与 action_bloc 配合使用的 Hooks 包。它可以帮助开发者更方便地处理状态管理和用户交互。

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

flutter pub add flutter_action_bloc_hooks

示例

以下是一个完整的示例，展示了如何使用 flutter_action_bloc_hooks 来实现一个计数器应用，并在特定条件下显示提示信息。

示例代码

main.dart

import 'package:action_bloc/action_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_action_bloc_hooks/flutter_action_bloc_hooks.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_hooks/flutter_bloc_hooks.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

// 一个 Cubit，用于计数并发出 FizzBuzz 动作
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 HookWidget {
  const CounterPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 useBlocActionListener 监听动作并显示 SnackBar
    useBlocActionListener<CounterCubit, String>(
      (context, action) {
        final snackBar = SnackBar(
          content: Text('$action'), // 显示动作内容
          duration: Duration(seconds: 2), // 设置 SnackBar 持续时间
          behavior: SnackBarBehavior.floating, // 设置 SnackBar 行为
        );

        ScaffoldMessenger.of(context)
          ..clearSnackBars() // 清除之前的 SnackBar
          ..showSnackBar(snackBar); // 显示新的 SnackBar
      },
    );

    // 使用 useBlocState 获取当前状态
    final state = useBlocState<CounterCubit, int>();

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterCubit>().increment(), // 增加计数
        child: const Icon(Icons.add), // 设置按钮图标
      ),
      body: Center(
        child: Text(
          '$state', // 显示当前状态
          style: Theme.of(context).textTheme.headline4, // 设置文本样式
        ),
      ),
    );
  }
}