Flutter状态管理插件onix_flutter_bloc的使用

该插件包含了一些设计用于改进使用BLoC状态管理体验的基础类。

BLoC (Cubit)

自定义BLoC是一种常规BLoC，并且具有一个额外的事件类型称为Single Result。Single Result旨在在UI中调用一次性功能（如显示对话框、导航等）。

基本步骤

1. 创建BLoC类

扩展你的BLoC类为BaseBloc：

class ExampleScreenBloc extends BaseBloc<BlocEvent, BlocState, BlocSR> {
  // 构造函数和其他方法
}

2. 创建状态类

扩展你的状态类以处理不同的状态：

class _ExampleScreenState extends BaseState<BlocState, ExampleScreenBloc, BlocSR, ExampleScreen> {
  // 构造函数和其他方法
}

3. 创建BLoC实例

在createBloc函数中创建BLoC实例：

ExampleScreenBloc createBloc() => ExampleScreenBloc();

4. 编写小部件主体

在buildWidget方法中编写你的小部件主体，而不是在build方法中：

[@override](/user/override)
Widget buildWidget(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Example Screen'),
    ),
    body: Center(
      child: Text('Hello, World!'),
    ),
  );
}

5. 处理Single Result事件或状态

可以使用集成的小部件来处理Single Result事件或状态：

srObserver(
  context: context,
  onSR: (BuildContext context, BlocSR sr) {
    // 处理Single Result
  },
  child: Scaffold(
    appBar: AppBar(
      title: Text('Example Screen'),
    ),
    body: Center(
      child: Text('Hello, World!'),
    ),
  ),
);

或者你可以重写onSR方法：

[@override](/user/override)
void onSR(BuildContext context, ExampleScreenBloc bloc, BlocSR sr) {
  // 处理Single Result
}

6. 处理失败对象

重写onFailure方法来处理失败对象：

[@override](/user/override)
void onFailure(BuildContext context, ExampleScreenBloc bloc, Failure failure) {
  // 处理失败
}

7. 实现自定义进度状态行为

重写onProgress方法来实现自定义进度状态行为：

[@override](/user/override)
void onProgress(BuildContext context, ExampleScreenBloc bloc, BaseProgressState progress) {
  // 处理进度状态
}

使用BLoC小部件

1. blocBuilder方法

blocBuilder方法用于根据新的状态创建小部件：

blocBuilder(
  builder: (BuildContext context, BlocState state) => MyWidget(...),
);

2. blocListener方法

blocListener方法用于响应BLoC状态的变化：

blocListener(
  listener: (context, state) => print(state),
  listenWhen: (prev, curr) => prev != curr,
  child: MyWidget(...),
);

3. blocConsumer方法

blocConsumer方法同时暴露了构建器和监听器，以便对新状态做出反应：

blocConsumer(
  listener: (context, state) => print(state),
  builder: (context, state) => MyWidget(...),
  listenWhen: (prev, curr) => prev != curr,
  buildWhen: (prev, curr) => prev != curr,
);

你也可以直接使用flutter_bloc包中的BlocBuilder、BlocListener、BlocConsumer小部件，没有任何限制。

完整示例

以下是一个完整的示例，展示了如何使用onix_flutter_bloc插件：

import 'package:example/base_bloc_example/base_bloc_example_screen.dart';
import 'package:example/base_cubit_example/base_cubit_example_screen.dart';
import 'package:example/di.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:loader_overlay/loader_overlay.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  initializeDi(GetIt.I);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GlobalLoaderOverlay(
      child: MaterialApp(
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        initialRoute: '/',
        routes: {
          '/': (context) => const MyHomePage(),
          '/base_cubit_example': (context) => const BaseCubitExampleScreen(title: 'Base Cubit Example'),
          '/base_bloc_example': (context) => const BaseBlocExampleScreen(title: 'Base BLoC Example'),
        },
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Onix Flutter Core Examples'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/base_cubit_example'),
              child: const Text('Base Cubit'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/base_bloc_example'),
              child: const Text('Base BLoC'),
            ),
          ],
        ),
      ),
    );
  }
}