目录
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));
综上,大致的使用就是这样。