Flutter Bloc之简单记录

目录

0.库安装

1.插件和自动生成

2.状态的配置

1.初始化中：

2.赋值完成后：

3.如果出错：

3.事件的配置

1.定义一个读取事件

2.定义一个更改事件

4.Bloc的设置

5.Bloc的使用

1.BlocProvider

2.内部调用

---

参考文章进行类的配置

0.库安装

首先需要安装bloc相关的两个库flutter_bloc和equatable。

1.插件和自动生成

我使用的是Android Studio，首先在插件市场安装Bloc，可以用来快速生成bloc类

 在bloces文件目录下新建想要创建的类名，右键New->Bloc Class

输入想创建的类名，选择equatable即可

 

 最终插件会在该目录下自动生成3个文件

 分别是：

test_bloc.dart:管理bloc的整体配置；

test_event.dart:管理bloc数据对应所需要处理的事件；

test_state.dart:管理bloc数据所存在的状态

2.状态的配置

先配置密封状态类，密封类必定抽象，无法在外部被继承且可以被switch选择

sealed class TestState extends Equatable {
  const TestState();
}

首先，可以配置我们认为bloc数据所可能存在的状态

1.初始化中：

/// 初始化数据，该状态无返回值
final class TestInitial extends TestState {
  @override
  List<Object> get props => [];
}

2.赋值完成后：

/// 初始化完成，该状态要返回赋值的值
class TestInitialed extends TestState {
  final Object? value;
  const TestInitialed({this.value = Object});

  @override
  List<Object?> get props => [value];
}

3.如果出错：

/// 显示错误情况
class TestError extends TestState{

  @override
  List<Object> get props => [];
}

以上简单配置了3种赋值的简单情况。

最终test_state.dart的内容为：

part of 'test_bloc.dart';

sealed class TestState extends Equatable {
  const TestState();
}

/// 初始化数据，该状态无返回值
final class TestInitial extends TestState {
  @override
  List<Object> get props => [];
}

/// 初始化完成，该状态要返回赋值的值
class TestInitialed extends TestState {
  final Object? value;
  const TestInitialed({this.value = Object});

  @override
  List<Object?> get props => [value];
}

/// 显示错误情况
class TestError extends TestState{

  @override
  List<Object> get props => [];
}

3.事件的配置

同理先配置事件的密封类

/// 密封类，必定抽象，无法在外部继承，可以被 switch 选择
sealed class TestEvent extends Equatable {
  const TestEvent();
}

1.定义一个读取事件

/// 获取信息事件
class LoadTestData extends TestEvent {

  @override
  List<Object> get props => [];
}

2.定义一个更改事件

/// 更改信息事件
class ChangeTestData extends TestEvent {
  final Object value;
  const ChangeTestData(this.value);

  @override
  List<Object> get props => [value];
}

最终test_event.dart的内容为：

part of 'test_bloc.dart';

/// 密封类，必定抽象，无法在外部继承，可以被 switch 选择
sealed class TestEvent extends Equatable {
  const TestEvent();
}

/// 获取信息事件
class LoadTestData extends TestEvent {

  @override
  List<Object> get props => [];
}

/// 更改信息事件
class ChangeTestData extends TestEvent {
  final Object value;
  const ChangeTestData(this.value);

  @override
  List<Object> get props => [value];
}

4.Bloc的设置

Bloc类TestBloc继承Bloc<TestEvent, TestState>，并且在初始化时为TestInitial()状态，然后谁知它在不同事件中的不同状态下的情况，这里定义前文中两个事件会对应发生的情况：

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'test_event.dart';
part 'test_state.dart';

class TestBloc extends Bloc<TestEvent, TestState> {
  TestBloc() : super(TestInitial()) {
    /// 定义读取事件发生时不同状态的情况
    on<LoadTestData>((event, emit) async {
      emit(TestInitial());
      try{
        await Future<void>.delayed(const Duration(seconds: 1));
        /// 正常应该是拉取到的信息
        const _value = Object();
        emit(const TestInitialed(value: _value));
      }catch(_){
        emit(TestError());
      }
    });

    on<ChangeTestData>((event, emit) async {
      emit(TestInitial());
      try{
        await Future<void>.delayed(const Duration(seconds: 1));
        /// 正常应该是拉取到的信息
        const _value = Object();
        emit(const TestInitialed(value: _value));
      }catch(_){
        emit(TestError());
      }
    });
  }
}

5.Bloc的使用

1.BlocProvider

在需要使用该Bloc的范围外，用BlocProvider进行包裹，BlocProvider本身可以嵌套使用。使用方法如下：

BlocProvider<TestBloc>(
      create: (_) => TestBloc()..add(LoadTestData()),
      child: Container(),
    )

其中..add是对Bloc的一次初始化启动，所以先进行值的加载，括号内的事件即是想要做的事件

2.内部调用

在这个包裹的树内，可以使用如下代码调用对应Bloc的事件函数进行相应的操作：

BlocProvider.of<TestBloc>(context).add(ChangeTestData(_value));

综上，大致的使用就是这样。