Flutter事件处理插件eventful_widget的使用

eventful_widget

一个使用bloc来鼓励逻辑与外观分离的Flutter包。

关于

这个包提供了两个有用的抽象类——EventfulWidget 和 StateInjectedWidget。通过继承这些类，可以实现简单且清晰的状态管理。正确使用此包将为您提供一条清晰的路径，轻松测试业务逻辑组件以及UI组件。

使用

首先定义您的事件和状态。

// 定义事件枚举
enum CoolEvent {
  somethingCool,
  somethingEvenCooler,
}

// 定义状态类
[@immutable](/user/immutable)
class CoolState {
  CoolState(this.message);
  final String message;
}

接下来创建我们的BLoC（业务逻辑组件）。

// 创建BLoC类
class CoolBloc extends Bloc<CoolEvent, CoolState> {
  CoolBloc() : super(CoolState('waiting for something cool to happen...')) {
    // 监听事件并更新状态
    on<CoolEvent>((event, emit) {
      String message = '';
      switch (event) {
        case CoolEvent.somethingCool:
          message = 'waiting for something cool to happen...';
          break;
        case CoolEvent.somethingEvenCooler:
          message = 'something REALLY cool happened!';
          break;
        default:
          message = 'this shouldn\'t ever happen';
      }
      emit(CoolState(message)); // 触发状态变化
    });
  }
}

然后创建一个使用新BLoC并委托绘制的widget，继承EventfulWidget并实现builder方法。

// 创建一个使用BLoC的widget
class CoolWidget extends EventfulWidget<CoolEvent, CoolState> {
  CoolWidget(Bloc<CoolEvent, CoolState> bloc) : super(bloc);

  [@override](/user/override)
  StateInjectedWidget<CoolEvent, CoolState> builder(
      BuildContext context, CoolState state, void Function(CoolEvent)? onEvent) =>
      CoolWidgetView(state, onEvent);
}

最后创建负责绘制UI的实际widget，确保继承StateInjectedWidget。

// 创建负责绘制UI的widget
class CoolWidgetView extends StateInjectedWidget<CoolEvent, CoolState> {
  CoolWidgetView(CoolState state, void Function(CoolEvent)? onEvent)
      : super(state, onEvent: onEvent);

  [@override](/user/override)
  Widget builder(BuildContext context, CoolState state, void Function(CoolEvent)? onEvent) {
    return ElevatedButton(
      onPressed: () {
        if (state.message == 'waiting for something cool to happen...') {
          onEvent!(CoolEvent.somethingEvenCooler);
        } else {
          onEvent!(CoolEvent.somethingCool);
        }
      },
      child: Text(state.message),
    );
  }
}

现在你可以像这样使用CoolWidget：

void main() {
  final bloc = CoolBloc();

  runApp(MaterialApp(
    home: Center(
      child: CoolWidget(bloc),
    ),
  ));
}

示例代码

以下是一个完整的示例代码，展示如何使用eventful_widget包。

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

// 定义事件和状态
enum CoolEvent {
  somethingCool,
  somethingEvenCooler,
}

[@immutable](/user/immutable)
class CoolState {
  CoolState(this.message);
  final String message;
}

// 创建BLoC
class CoolBloc extends Bloc<CoolEvent, CoolState> {
  CoolBloc() : super(CoolState('waiting for something cool to happen...')) {
    on<CoolEvent>((event, emit) {
      String message = '';
      switch (event) {
        case CoolEvent.somethingCool:
          message = 'waiting for something cool to happen...';
          break;
        case CoolEvent.somethingEvenCooler:
          message = 'something REALLY cool happened!';
          break;
        default:
          message = 'this shouldn\'t ever happen';
      }
      emit(CoolState(message));
    });
  }
}

// 创建使用BLoC的widget
class CoolWidget extends EventfulWidget<CoolEvent, CoolState> {
  CoolWidget(Bloc<CoolEvent, CoolState> bloc) : super(bloc);

  [@override](/user/override)
  StateInjectedWidget<CoolEvent, CoolState> builder(
      BuildContext context, CoolState state, void Function(CoolEvent)? onEvent) =>
      CoolWidgetView(state, onEvent);
}

// 创建负责绘制UI的widget
class CoolWidgetView extends StateInjectedWidget<CoolEvent, CoolState> {
  CoolWidgetView(CoolState state, void Function(CoolEvent)? onEvent)
      : super(state, onEvent: onEvent);

  [@override](/user/override)
  Widget builder(BuildContext context, CoolState state, void Function(CoolEvent)? onEvent) {
    return ElevatedButton(
      onPressed: () {
        if (state.message == 'waiting for something cool to happen...') {
          onEvent!(CoolEvent.somethingEvenCooler);
        } else {
          onEvent!(CoolEvent.somethingCool);
        }
      },
      child: Text(state.message),
    );
  }
}

void main() {
  final bloc = CoolBloc();

  runApp(MaterialApp(
    home: Center(
      child: CoolWidget(bloc),
    ),
  ));
}