Flutter图像处理插件bloc_lens的使用

bloc_lens 是一个用于Dart和BLoC的功能性透镜库，它提供了一组特定于BLoC的类和扩展。通过使用这个库，你可以更轻松地管理状态属性并简化代码。

基本用法

假设你有一个包含多个属性的BLoC，并希望独立修改这些值。通常情况下，你需要为每个属性创建单独的方法：

class SettingsCubit extends Cubit<SettingsState> {
  SettingsCubit() : super(SettingsState());

  void setScaling(double scaling) {
    emit(state.copyWith(scaling: scaling));
  }

  void setHapticFeedback(bool hapticFeedback) {
    emit(state.copyWith(hapticFeedback: hapticFeedback));
  }

  void setThemeMode(ThemeMode themeMode) {
    emit(state.copyWith(themeMode: themeMode));
  }

  void setLocale(Locale locale) {
    emit(state.copyWith(locale: locale));
  }

  void setFontSize(double fontSize) {
    emit(state.copyWith(fontSize: fontSize));
  }
}

class SettingsState {
  const SettingsState({
    required this.scaling,
    required this.hapticFeedback,
    required this.themeMode,
    required this.locale,
    required this.fontSize,
  });

  final double scaling;
  final bool hapticFeedback;
  final ThemeMode themeMode;
  final Locale locale;
  final double fontSize;
}

但是这种方式将每个属性的getter和setter分开，迫使你传递当前值、修改方式以及可能更多的信息（如允许的值列表或允许的范围）。使用透镜可以让你有一个对象完全管理值及其约束。

使用透镜前后的对比

没有使用透镜

class MySlider extends StatelessWidget {
  const MySlider({
    super.key,
    required this.value,
    required this.onChanged,
    required this.min,
    required this.max,
  });
  
  final double value;
  final ValueChanged<double> onChanged;
  final double min;
  final double max;

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

使用透镜

class MySlider extends StatelessWidget {
  const MySlider({
    super.key,
    required this.lens,
  });
  
  final NumberLens<double> lens;

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

定义BLoC中的透镜

你可以使用包中提供的扩展来定义BLoC中的透镜：

class SettingsCubit extends Cubit<SettingsState> {
  SettingsCubit() : super(SettingsState());

  late final scaling = numberLens(
    get: () => state.scaling,
    set: (value) => state.copyWith(scaling: value),
    min: 0.5,
    max: 2.0,
    increment: 0.1,
  );

  late final themeMode = enumLens(
    get: () => state.themeMode,
    set: (value) => state.copyWith(themeMode: value),
    values: ThemeMode.values,
  );
  
  // 其他属性...
}

然后在你的小部件中使用这些透镜：

Widget build(BuildContext context) {
  final cubit = context.watch<SettingsCubit>();

  return MySlider(
    lens: cubit.scaling,
  );
}

使用 flutter_hooks

如果你还在使用 flutter_hooks，可以在项目中添加一个钩子，结合查找块和监听特定更改：

@optionalTypeArgs
L useBlocLens<B extends BlocBase<S>, S, L extends BlocLens<S, T>, T>(
  L Function(B cubit) lensGetter, {
  bool listen = true,
}) {
  final cubit = useContext().read<B>();
  final lens = lensGetter(cubit);
  useStream(
    listen ? cubit.stream.map((_) => lens.get()).distinct() : null,
  );
  return lens;
}

Widget build(BuildContext context) {
  final scaling = useBlocLens((SettingsCubit cubit) => cubit.scaling);

  return MySlider(
    lens: scaling,
  );
}

请注意，此钩子未在包中直接提供，以保持Flutter无关的依赖关系。

示例应用

要查看如何在示例Flutter应用中使用透镜，请查看示例应用。

实验功能

如果你想预览一种更简单的方式来使用BLoC中的透镜而无需任何样板代码，请查看bloc_lens_macros包。

以上内容展示了如何在Flutter应用中使用bloc_lens插件来简化状态管理和UI更新的过程。通过使用透镜，你可以更方便地管理复杂的状态属性，并减少样板代码的数量。