Flutter自定义Hook管理插件hooked_bloc的使用

简介

         

hooked_bloc 是一个Flutter包，简化了Bloc/Cubit的注入和使用。该库基于React Native中引入的钩子概念，并适应Flutter环境。通过Flutter Hooks，您可以将视图逻辑提取到通用用例中并重用它们，从而加快编写小部件的速度并使其更简单。

目录

• 动机
• 安装
• 基础
  • useBloc
  • useBlocFactory
  • useBlocBuilder
  • useBlocComparativeBuilder
  • useBlocListener
  • useBlocComparativeListener
  • useActionListener
• 贡献

动机

在应用程序中使用Bloc/Cubit时，您需要在小部件树中提供对象实例以接收状态。这通常通过BlocBuilder和BlocProvider实现，增加了小部件的复杂性。每次使用BlocBuilder、BlocListener或BlocSelector时，都会增加代码量和复杂度。借助hooked_bloc，我们可以通过钩子来简化这些操作。

例如，以下代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ...,
    body: BlocProvider<RealLifeCubit>(
      create: (context) => RealLifeCubit()..loadData(),
      child: BlocListener<RealLifeCubit, hooked.BuildState>(
        listenWhen: (_, state) => state is ErrorState,
        listener: (context, state) {
          // Show some view on event
        },
        child: BlocBuilder<RealLifeCubit, hooked.BuildState>(
          buildWhen: (_, state) =>
              [LoadedState, LoadingState, ShowItemState]
                  .contains(state.runtimeType),
          builder: (BuildContext context, hooked.BuildState state) {
            return // Build your widget using `state`
          },
        ),
      ),
    ),
  );
}

可以简化为：

@override
Widget build(BuildContext context) {
  final cubit = useBloc<RealLifeCubit>();

  useBlocListener<RealLifeCubit, BuildState>(cubit, (cubit, value, context) {
    // Show some view on event
  }, listenWhen: (state) => state is ErrorState);

  final state = useBlocBuilder(
    cubit,
    buildWhen: (state) =>
        [LoadedState, LoadingState, ShowItemState].contains(
          state.runtimeType,
        ),
  );

  return // Build your widget using `state`
}

这段代码功能等同于之前的例子，它仍然会在适当的时间重建小部件。寻找合适的Cubit/Bloc并提供当前状态的全部逻辑都隐藏在useBloc和useBlocBuilder钩子中。

安装

安装包

运行命令：

flutter pub add hooked_bloc

或者手动添加依赖项到pubspec.yaml：

dependencies:
  # Library already contains flutter_hooks package
  hooked_bloc:

初始化HookedBloc（可选）：

void main() async {
  // With GetIt or Injectable
  await configureDependencies();

  runApp(
    HookedBlocConfigProvider(
      injector: () => getIt.get,
      builderCondition: (state) => state != null, // Global build condition
      listenerCondition: (state) => state != null, // Global listen condition
      child: const MyApp(),
    )
  );

  // Or you can omit HookedBlocInjector(...)
  // and allow library to find the cubit in the widget tree
}

然后你可以开始使用钩子编写小部件：

// Remember to inherit from HookWidget
class MyApp extends HookWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // At start obtain a cubit instance
    final cubit = useBloc<CounterCubit>();
    // Then observe state's updates
    // `buildWhen` param will override builderCondition locally
    final state = useBlocBuilder(cubit, buildWhen: (state) => state <= 10);
    // Create a listener for the side-effect
    useBlocListener(cubit, (cubit, value, context) {
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("Button clicked"),
          ));
    });

    // Build widget's tree without BlocProvider
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () => cubit.increment(), // Access cubit in tree
          child: const Icon(Icons.add),
        ),
        // Consume state without BlocBuilder
        body: Center(child: Text("The button has been pressed $state times")),
      ),
    );
  }
}

基础

钩子列表

useBloc

useBloc钩子尝试通过Cubit提供者找到Cubit，如果未指定则查找小部件树。

@override
Widget build(BuildContext context) {
  // The hook will provide the expected object
  final cubit = useBloc<SimpleCubit>(
    // For default hook automatically closes cubit
    closeOnDispose: true,
  );

  return // Access provided cubit
}

useBlocFactory

useBlocFactory钩子尝试通过提供的注入方法找到工厂并返回由其创建的Cubit。

class SimpleCubitFactory extends BlocFactory<SimpleCubit> {
  bool _value = true;

  @override
  SimpleCubit create() {
    return _value ? SimpleCubitA() : SimpleCubitB();
  }

  void configure(bool value) {
    _value = value;
  }
}

@override
Widget build(BuildContext context) {
  // The hook will provide the expected object
  final cubit = useBlocFactory<SimpleCubit, SimpleCubitFactory>(
    onCubitCreate: (cubitFactory) {
      cubitFactory.configure(false);
    }
  );

  return // Access provided cubit
}

useBlocBuilder

useBlocBuilder钩子在新状态出现时重建小部件。

final CounterCubit cubit = CounterCubit("My cubit");

@override
Widget build(BuildContext context) {
  // The state will be updated along with the widget
  // For default the state will be updated basing on `builderCondition`
  final int state = useBlocBuilder(cubit);

  return // Access provided state
}

useBlocComparativeBuilder

useBlocComparativeBuilder钩子在新状态出现且比较结果为正时重建小部件。

final CounterCubit cubit = CounterCubit("My cubit");

@override
Widget build(BuildContext context) {
  // The state will be updated along with the widget
  // We can compare state's changes to allow rebuild
  final state = useBlocComparativeBuilder(
    cubit,
    buildWhen: (int previous, int current) {
      return current != previous;
    },
  );

  return // Access provided state
}

useBlocListener

useBlocListener钩子允许观察代表动作的Cubit状态（例如显示Snackbar）。

final EventCubit cubit = EventCubit();

@override
Widget build(BuildContext context) {
  // Handle state as event independently of the view state
  useBlocListener(cubit, (_, value, context) {
    _showMessage(context, (value as ShowMessage).message);
  }, listenWhen: (state) => state is ShowMessage);

  return // Build your widget
}

useBlocComparativeListener

useBlocComparativeListener钩子允许观察并比较代表动作的Cubit状态（例如显示Snackbar）。

final EventCubit cubit = EventCubit();

@override
Widget build(BuildContext context) {
  // Handle state as event independently of the view state
  // We can compare state changes to allow listener function to be called
  useBlocComparativeListener(
    cubit,
    (_, value, context) {
       _showMessage(context, (value as ShowMessage).message);
    },
    listenWhen: (previousState, currentState) => previousState is! ShowMessage && currentState is ShowMessage,
  );

  return // Build your widget
}

useActionListener

useActionListener钩子与useBlocListener类似，但监听不同于状态流的流，并可用于需要不同通知流程的动作。

class MessageActionCubit extends EventCubit with BlocActionMixin<String, BuildState> {
  @override
  void dispatch(String action) {
    super.dispatch(action);
  }
}

@override
Widget build(BuildContext context) {
  // Handle separate action stream with values other than a state type
  useActionListener(
    cubit, 
    (String action) {
      _showMessage(context, action);
    },
    actionWhen: (previousAction, action) => true,
  );

  return // Build your widget
}

贡献

欢迎对项目进行任何贡献！

• 提交新的功能请求或修复建议应通过pull-request或issue。
• 检查是否已有相同的功能请求或修复建议。
• 描述为什么需要此功能或描述问题所在。
• 编写测试用例。
• 更新README文档。

更多详情请参考贡献指南。

示例代码

以下是hooked_bloc的一个完整示例demo：

import 'package:example/di/injector.dart';
import 'package:example/page/home_page.dart';
import 'package:flutter/material.dart';
import 'package:hooked_bloc/hooked_bloc.dart';

void main() async {
  // With GetIt or Injectable
  await configureDependencies();

  runApp(
    HookedBlocConfigProvider(
      injector: () => getIt.get,
      builderCondition: (state) => state != null, // Global build condition
      listenerCondition: (state) => state != null, // Global listen condition
      child: const MyApp(),
    ),
  );
}

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

  final appName = "Hooked Bloc";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(title: appName),
    );
  }
}

// Quickstart example counter page
class CounterPage extends HookWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // At start obtain a cubit instance
    final cubit = useBloc<CounterCubit>();
    // Then observe state's updates
    //`buildWhen` param will override builderCondition locally
    final state = useBlocBuilder(cubit, buildWhen: (state) => state <= 10);
    // Create a listener for the side-effect
    useBlocListener(cubit, (cubit, value, context) {
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("Button clicked")));
    });

    // Build widget's tree without BlocProvider
    return Scaffold(
      appBar: AppBar(title: Text("Counter Page")),
      floatingActionButton: FloatingActionButton(
        onPressed: () => cubit.increment(), // Access cubit in tree
        child: const Icon(Icons.add),
      ),
      // Consume state without BlocBuilder
      body: Center(child: Text("The button has been pressed $state times")),
    );
  }
}

这个示例展示了如何使用hooked_bloc中的各种钩子来简化状态管理和UI更新。希望这能帮助你更好地理解和使用hooked_bloc！