Flutter状态管理简化插件bloc_ease的使用

bloc_ease 是一个Dart库，旨在通过使用typedefs代替定义状态类来解决 flutter_bloc 中样板代码的问题。以下是关于如何使用 bloc_ease 的详细指南。

目录

• 问题及解决方案
• 如何使用
  • 步骤1：配置BlocEaseStateWidgetProvider
  • 步骤2：创建Bloc/Cubit
  • 步骤3：在UI中使用<CubitName>BlocEaseBuilder
• 示例代码
• 模板
• 技巧与窍门

问题及解决方案

解决的问题

1. 重复编写相同类型的状态：对于每个 Bloc/Cubit（初始、加载、成功、失败）。
2. 重写 == 和 hashCode：或使用 Equatable 包为所有状态。
3. 处理不需要的所有状态：即使只需要成功状态。
4. 返回相同的Widget：例如 ProgressIndicator 用于加载状态。
5. 管理 buildWhen：以避免处理所有状态。
6. 采用不良实践：如使用单个状态类而不是继承。
7. 管理多个状态：由于样板代码的存在。

提供的解决方案

1. 消除编写状态类的需求：利用泛型（如 SucceedState<Auth> vs SucceedState<User>）。
2. 全局处理常见状态：在UI中自动处理初始、加载和失败状态。
3. 提供构建器：以类型安全的方式提供成功对象，并自主处理其他状态。
4. 使用typedefs：轻松区分状态（如 typedef AuthSucceedState = SucceedState<Auth>），并提供了IntelliJ和VSCode的代码片段。

如何使用

步骤1：配置BlocEaseStateWidgetProvider

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocEaseStateWidgetProvider(
      initialStateBuilder: () => const Placeholder(),
      loadingStateBuilder: ([progress]) => const Center(child: CircularProgressIndicator()),
      failureStateBuilder: ([exceptionObject, failureMessage]) => Center(child: Text(failureMessage ?? 'Oops something went wrong!')),
      child: MaterialApp(
        //...
      ),
    );
  }
}

步骤2：创建Bloc/Cubit

使用快捷键 bloceasebloc 或 bloceasecubit 创建基于需求的Bloc或Cubit。此模板需要编辑两个名称：

• Cubit名称 -> UserCubit
• 成功对象 -> User（这是从Bloc/Cubit的成功状态预期的对象）

import 'package:bloc_ease/bloc_ease.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

typedef UserState = BlocEaseState<User>; // Success Object

typedef UserInitialState = InitialState<User>;
typedef UserLoadingState = LoadingState<User>;
typedef UserSucceedState = SucceedState<User>;
typedef UserFailedState = FailedState<User>;

typedef UserBlocBuilder = BlocBuilder<UserCubit, UserState>;
typedef UserBlocListener = BlocListener<UserCubit, UserState>;
typedef UserBlocConsumer = BlocConsumer<UserCubit, UserState>;

typedef UserBlocEaseBuilder = BlocEaseStateBuilder<UserCubit, User>;
typedef UserBlocEaseListener = BlocEaseStateListener<UserCubit, User>;
typedef UserBlocEaseConsumer = BlocEaseStateConsumer<UserCubit, User>;

class UserCubit extends Cubit<UserState> {
  UserCubit(this.userRepo) : super(const UserInitialState());

  final UserRepo userRepo;

  void fetchUser() async {
    emit(const UserLoadingState());

    try {
      final user = await userRepo.fetchUser();
      emit(UserSucceedState(user));
    } catch (e) {
      emit(UserFailedState('Failed to fetch user', e));
    }
  }
}

步骤3：在UI中使用<CubitName>BlocEaseBuilder

class SomeWidget extends StatelessWidget {
  const SomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return UserBlocEaseBuilder(
      succeedBuilder: (user) => SomeOtherWidget(user),
    );
  }
}

示例代码

获取用户详情

获取用户通常需要4种状态：

• 初始状态 - 当未登录时
• 加载状态 - 当获取进行中
• 成功状态 - 当成功获取时
• 失败状态 - 用户不可用或获取失败

// 定义Cubit
class UserCubit extends Cubit<UserState> {
  UserCubit(this.userRepo) : super(const UserInitialState());

  final UserRepo userRepo;

  void fetchUser() async {
    emit(const UserLoadingState());

    try {
      final user = await userRepo.fetchUser();
      emit(UserSucceedState(user));
    } catch (e) {
      emit(UserFailedState('Failed to fetch user', e));
    }
  }
}

// UI部分
class UserDetailPage extends StatelessWidget {
  const UserDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return UserBlocEaseBuilder(
      succeedBuilder: (user) => UserDetailsWidget(user),
    );
  }
}

模板

IntelliJ 和 Android Studio

复制模板后，在IntelliJ/Android studio设置中添加Live Templates，创建新的模板组为BlocEase并粘贴模板。

VSCode

复制模板后，在VSCode中按 Cmd(Ctrl) + Shift + P，选择 “Snippets: Configure User Snippets”，然后在dart.json中粘贴。

技巧与窍门

使用BlocEaseListener和BlocEaseConsumer

class BlocEaseListenerExampleWidget extends StatelessWidget {
  const BlocEaseListenerExampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return UserBlocEaseListener(
      succeedListener: (user) {
        // 处理成功状态
      },
      child: // 子组件
    );
  }
}

class BlocEaseConsumerExampleWidget extends StatelessWidget {
  const BlocEaseConsumerExampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return UserBlocEaseConsumer(
      succeedBuilder: (user) => SomeWidget(user),
      child: // 子组件
    );
  }
}

测试

blocTest<UserCubit, UserState>(
  'emits UserSucceedState after fetching user',
  setUp: () {
    when(repo.fetchUser).thenAnswer((_) async => mockUser);
  },
  build: () => UserCubit(repository: repo),
  act: (cubit) => cubit.fetchUser(),
  expect: () => UserSucceedState(mockUser),
  verify: (_) => verify(repository.fetchUser).called(1),
);

以上是关于 bloc_ease 插件的详细介绍和使用方法，希望对您有所帮助！如果有任何问题或建议，请随时联系我。