目录
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 {@overrideList<Object> get props => [];
}
2.赋值完成后:
/// 初始化完成,该状态要返回赋值的值
class TestInitialed extends TestState {final Object? value;const TestInitialed({this.value = Object});@overrideList<Object?> get props => [value];
}
3.如果出错:
/// 显示错误情况
class TestError extends TestState{@overrideList<Object> get props => [];
}
以上简单配置了3种赋值的简单情况。
最终test_state.dart的内容为:
part of 'test_bloc.dart';sealed class TestState extends Equatable {const TestState();
}/// 初始化数据,该状态无返回值
final class TestInitial extends TestState {@overrideList<Object> get props => [];
}/// 初始化完成,该状态要返回赋值的值
class TestInitialed extends TestState {final Object? value;const TestInitialed({this.value = Object});@overrideList<Object?> get props => [value];
}/// 显示错误情况
class TestError extends TestState{@overrideList<Object> get props => [];
}
3.事件的配置
同理先配置事件的密封类
/// 密封类,必定抽象,无法在外部继承,可以被 switch 选择
sealed class TestEvent extends Equatable {const TestEvent();
}
1.定义一个读取事件
/// 获取信息事件
class LoadTestData extends TestEvent {@overrideList<Object> get props => [];
}
2.定义一个更改事件
/// 更改信息事件
class ChangeTestData extends TestEvent {final Object value;const ChangeTestData(this.value);@overrideList<Object> get props => [value];
}
最终test_event.dart的内容为:
part of 'test_bloc.dart';/// 密封类,必定抽象,无法在外部继承,可以被 switch 选择
sealed class TestEvent extends Equatable {const TestEvent();
}/// 获取信息事件
class LoadTestData extends TestEvent {@overrideList<Object> get props => [];
}/// 更改信息事件
class ChangeTestData extends TestEvent {final Object value;const ChangeTestData(this.value);@overrideList<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));
综上,大致的使用就是这样。