Flutter状态管理架构插件clean_bloc的使用

Clean Bloc 是一个围绕 bloc 包构建的封装器，它帮助实现清洁架构设计模式。

开始使用

安装

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

dependencies:
  clean_bloc: latest

使用

分页的 Clean Cubit

import 'package:clean_bloc/clean_bloc.dart';
import 'package:clean_network/clean_network.dart';
import 'package:injectable/injectable.dart';

@injectable
class UserCubit extends PaginatedCleanCubit<UserModel> {
  final UserRepository _repository;

  UserCubit(this._repository) {
    init();
  }

  [@override](/user/override)
  Pagination get initialPage =>
      const Pagination.page(currentPage: 1, perPage: 6);

  [@override](/user/override)
  PaginatedEitherResponse<UserModel> Function(Pagination pagination)
      get remoteCall {
    return (pagination) {
      final params = pagination as PagePagination;
      return _repository.getUsers(
        page: params.currentPage,
        limit: params.perPage,
      );
    };
  }
}

Clean Cubit

import 'package:clean_bloc/clean_bloc.dart';
import 'package:clean_network/clean_network.dart';
import 'package:injectable/injectable.dart';

@injectable
class UserCubit extends CleanCubit<UserModel> {
  final UserRepository _repository;

  UserCubit(this._repository) {
    init();
  }

  [@override](/user/override)
  EitherResponse<UserModel> Function() get remoteCall {
    return () => _repository.getUser();
  }
}

创建事件用于 Clean Bloc

import 'package:clean_bloc/clean_bloc.dart';

class UserAddEvent extends CleanEvent {
  [@override](/user/override)
  List<Object?> get props => [];
}

Clean Bloc

import 'package:clean_bloc/clean_bloc.dart';
import 'package:clean_network/clean_network.dart';
import 'package:injectable/injectable.dart';

@injectable
class UserBloc extends CleanBloc<UserModel> {
  final UserRepository _repository;

  UserBloc(this._repository) {
    init();
    on<UserAddEvent>(_handleAddEvent);
  }

  [@override](/user/override)
  EitherResponse<UserModel> Function() get remoteCall {
    return () => _repository.getUser();
  }

  /// 处理 [CleanEventInit] 事件
  FutureOr<void> _handleAddEvent(
      UserAddEvent event, Emitter<CleanState<T>> emit) async {
    // 执行某些操作
  }
}

创建事件用于分页的 Clean Bloc

import 'package:clean_bloc/clean_bloc.dart';

class UserAddEvent extends PaginatedCleanEvent {
  [@override](/user/override)
  List<Object?> get props => [];
}

分页的 Clean Bloc

import 'package:clean_bloc/clean_bloc.dart';
import 'package:clean_network/clean_network.dart';
import 'package:injectable/injectable.dart';

@injectable
class UserBloc extends PaginatedCleanBloc<UserModel> {
  final UserRepository _repository;

  UserBloc(this._repository) {
    init();
    on<UserAddEvent>(_handleAddEvent);
  }

  [@override](/user/override)
  Pagination get initialPage =>
      const Pagination.page(currentPage: 1, perPage: 6);

  [@override](/user/override)
  PaginatedEitherResponse<UserModel> Function(Pagination pagination)
      get remoteCall {
    return (pagination) {
      final params = pagination as PagePagination;
      return _repository.getUsers(
        page: params.currentPage,
        limit: params.perPage,
      );
    };
  }

  /// 处理 [UserAddEvent] 事件
  FutureOr<void> _handleAddEvent(
      UserAddEvent event,
      Emitter<PaginatedCleanState<T>> emit,
      ) async {
    // 执行某些操作
  }
}

使用 Clean Bloc

import 'package:auto_route/auto_route.dart';
import 'package:clean_bloc/clean_bloc.dart';
import 'package:example/src/core/di/injector.dart';
import 'package:example/src/features/users/domain/models/user_model.dart';
import 'package:example/src/features/users/presentation/blocs/list/user_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

[@RoutePage](/user/RoutePage)()
class UsersPage extends StatelessWidget {
  const UsersPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => getIt<UserCubit>(),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Users'),
        ),
        body: const UserList(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification is ScrollEndNotification &&
            notification.metrics.extentAfter == 0) {
          context.read<UserCubit>().fetchMore();
          return true;
        }
        return false;
      },
      child: PaginatedCleanBuilder<UserCubit, UserModel>(
        successBuilder: (context, users, isLoadingMore) {
          if (users.isEmpty) {
            return const Center(
              child: Text('No users found'),
            );
          }
          return ListView.builder(
            itemCount: isLoadingMore ? users.length + 1 : users.length,
            itemBuilder: (context, index) {
              if (index == users.length && isLoadingMore) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                final user = users[index];
                return ListTile(
                  title: Text(user.name),
                  subtitle: Text(user.email),
                );
              }
            },
          );
        },
      ),
    );
  }
}