Flutter业务逻辑管理插件ff_bloc的使用

Flutter业务逻辑管理插件ff_bloc的使用

导入

首先，在你的 pubspec.yaml 文件中添加 ff_bloc 插件依赖：

dependencies:
  ff_bloc: 1.0.3

为什么使用ff_bloc？

使用 ff_bloc 的好处包括：

• 事件处理：applyAsync 方法使得事件处理更加简单且快速。
• 文件结构：类似于功能模块的文件结构更适合代码生成和快速导航。
• 状态管理：易于理解和使用的基本状态管理。
• 订阅和取消订阅：基本抽象用于订阅和取消订阅。
• 自动清理资源：通过 GetIt 管理生命周期。

示例代码

以下是一个完整的示例代码，展示了如何使用 ff_bloc 来管理业务逻辑。

主应用文件

在 main.dart 中设置应用根组件，并初始化 ff_bloc。

import 'package:example/you_awesome/index.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: YouAwesomePage(
        bloc: YouAwesomeBloc(
          provider: YouAwesomeProvider(),
        ),
      ),
    );
  }
}

Bloc 类

定义一个 YouAwesomeBloc 类来处理业务逻辑。

import 'package:equatable/equatable.dart';
import 'package:ff_bloc/ff_bloc.dart';
import 'package:get_it/get_it.dart';

class YouAwesomeBloc extends FFBloc<YouAwesomeEvent, YouAwesomeState> {
  YouAwesomeBloc({
    required this.provider,
    super.initialState = const YouAwesomeState(),
  });

  final YouAwesomeProvider provider;

  [@override](/user/override)
  Iterable<StreamSubscription>? initSubscriptions() {
    return [];
  }

  [@override](/user/override)
  YouAwesomeState onErrorState(Object error) => 
      state.copyWith(error: error, isLoading: false);
}

状态类

定义一个 YouAwesomeState 类来表示状态。

class YouAwesomeState extends FFState<YouAwesomeState, YouAwesomeViewModel> {
  const YouAwesomeState({
    super.version = 0,
    super.isLoading = false,
    super.data,
    super.error,
  });

  [@override](/user/override)
  StateCopyFactory<YouAwesomeState, YouAwesomeViewModel> getCopyFactory() => YouAwesomeState.new;
}

视图模型类

定义一个 YouAwesomeViewModel 类来表示数据模型。

class YouAwesomeViewModel extends Equatable {
  const YouAwesomeViewModel({
    required this.items,
  });

  final List<YouAwesomeModel>? items;

  [@override](/user/override)
  List<Object?> get props => [items];

  YouAwesomeViewModel copyWith({
    List<YouAwesomeModel>? items,
  }) {
    return YouAwesomeViewModel(
      items: items ?? this.items,
    );
  }
}

事件类

定义一个 LoadYouAwesomeEvent 类来处理加载事件。

class LoadYouAwesomeEvent extends YouAwesomeEvent {
  LoadYouAwesomeEvent({required this.id});
  final String? id;

  static const String _name = 'LoadYouAwesomeEvent';

  [@override](/user/override)
  String toString() => _name;

  [@override](/user/override)
  Stream<YouAwesomeState> applyAsync({required YouAwesomeBloc bloc}) async* {
    yield bloc.state.copyWithWithoutError(isLoading: true);
    final result = await bloc.provider.fetchAsync(id);
    yield bloc.state.copyWithWithoutError(
      isLoading: false,
      data: YouAwesomeViewModel(items: result),
    );
  }
}

UI 组件

使用 BlocBuilder 构建 UI 组件以响应状态变化。

[@override](/user/override)
Widget build(BuildContext context) {
  return BlocBuilder<YouAwesomeBloc, YouAwesomeState>(
    bloc: widget.bloc,
    builder: (
      BuildContext context,
      YouAwesomeState currentState,
    ) {
      return currentState.when(
        onLoading: () => const CircularProgressIndicator(),
        onEmpty: (data) => _Empty(),
        onData: (data) => _BodyList(data: data),
        onError: (e) => Center(
          child: Column(
            children: [
              Text(e.toString()),
              TextButton(
                onPressed: _load,
                child: const Text('ReLoad'),
              )
            ],
          ),
        ),
      );
    },
  );
}

高级用法

以下是一个自定义 CustomBloc 的示例，展示了如何覆盖日志记录逻辑。

abstract class CustomBloc<Event extends CustomBlocEvent<State, Bloc<Event, State>>, State extends CustomState<Self, DataT>> extends FFBloc<Event, State> {
  CustomBloc({
    required super.initialState,
    required this.logger,
  });

  [@nonVirtual](/user/nonVirtual)
  final Logger logger;

  [@override](/user/override)
  void onObserver({required Event event}) {
    logger.i('on event: ${event.toString()}', tag: runtimeType.toString());
  }

  [@override](/user/override)
  void onErrorObserver({required Event event, required Object error, required StackTrace stackTrace}) {
    logger.e(
      error.toString(),
      exception: error,
      tag: event.runtimeType.toString(),
      stackTrace: stackTrace,
    );
  }

  [@override](/user/override)
  void onTransitionObserver({required Transition<Event, State> transition}) {
    logger.i('onTransition: ${transition.toString()}', tag: runtimeType.toString());
  }
}

[@immutable](/user/immutable)
abstract class CustomState<Self, DataT> extends FFState<Self, DataT> {
  const CustomState({
    required super.version,
    required super.isLoading,
    required super.data,
    required super.error,
  });
}