当前位置：网站首页>使用BLoC 构建 Flutter的页面实例

使用BLoC 构建 Flutter的页面实例

2022-07-02 10:11:00 【InfoQ】

前言

我们上一篇讲了

BlocProvider

的使用，感觉和

Provider

几乎是一样的，没什么新鲜感。在上一篇中有一个 BlocBuilder 倒是有点奇怪，我们回顾一下代码：

BlocBuilder<CounterCubit, int>(
 builder: (context, count) => Text(
 '$count',
 style: TextStyle(
 fontSize: 32,
 color: Colors.blue,
 ),
 ),

这里面的

count

会自动跟随

BlocProvider

的状态对象变化，但是我们并没有看到绑定的动作，比如我们使用

Provider

是使用

context.watch

方法，但这里没有。这个是怎么回事呢？本篇我们就来介绍

BlocBuilder

的使用。

BlocBuilder 与状态对象的绑定

flutter_bloc 源码中的BlocBuilder的定义如下所示：

class BlocBuilder<B extends BlocBase<S>, S> extends BlocBuilderBase<B, S> {
 const BlocBuilder({
 Key? key,
 required this.builder,
 B? bloc,
 BlocBuilderCondition<S>? buildWhen,
 }) : super(key: key, bloc: bloc, buildWhen: buildWhen);

 final BlocWidgetBuilder<S> builder;

 @override
 Widget build(BuildContext context, S state) => builder(context, state);
}

绑定状态对象有两种方式，在没有指定

bloc

参数的时候，它会通过

BlocProvider

和

context

自动向上寻找匹配的状态对象。这个代码在其父类

BlocBuilderBase

（是一个

StatefulWidget

）的

State

对象中实现，实际上使用的还是

context.read

来完成的。

@override
void initState() {
 super.initState();
 _bloc = widget.bloc ?? context.read<B>();
 _state = _bloc.state;
}

而如果指定了

bloc

参数，那么就使用指定的

bloc

对象，这样可以使用自有的

bloc

对象而无需

BlocProvider

提供。这个用法有点像GetX 的

GetBuilder

了。比如我们的计数器应用，可以简化为下面的形式。

class BlocBuilderDemoPage extends StatelessWidget {
 final counterCubit = CounterCubit();
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Bloc 计数器'),
 ),
 body: Center(
 child: BlocBuilder<CounterCubit, int>(
 builder: (context, count) => Text(
 '$count',
 style: TextStyle(
 fontSize: 32,
 color: Colors.blue,
 ),
 ),
 bloc: counterCubit,
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () {
 counterCubit.increment();
 },
 tooltip: '点击增加',
 child: Icon(Icons.add),
 ),
 );
 }
}

按条件刷新

BlocBuilder

还有一个参数

buildWhen

，这是一个返回

bool

值的回调方法：

typedef BlocBuilderCondition<S> = bool Function(S previous, S current);

也就是我们可以根据前后状态来决定是否要刷新界面。举个例子，比如我们刷新前后的数据一致，那就没必要重新刷新界面了。我们以之前写过的仿掘金个人主页来验证一下。这里我们为了完成网络请求业务，我们构建了四个状态：

enum LoadingStatus {
 loading, //加载
 success, //加载成功
 failed, //加载失败
}

然后使用

Bloc

的

event

模式，定义3个

Event

。

abstract class PersonalEvent {}
// 获取数据事件
class FetchEvent extends PersonalEvent {}
// 成功事件
class FetchSucessEvent extends PersonalEvent {}
// 失败事件
class FetchFailedEvent extends PersonalEvent {}

同时定义了一个响应的状态数据类，将个人信息对象和加载状态聚合在一起。

class PersonalResponse {
 PersonalEntity? personalProfile;
 LoadingStatus status = LoadingStatus.loading;

 PersonalResponse({this.personalProfile, required this.status});
}

PersonalBloc

的代码实现如下，对应3个事件我们处理的方式如下：

FetchEvent
：请求网络数据；

FetchSucessEvent
：加载成功后，用请求得到的个人信息对象和加载状态构建新的
PersonalResponse
对象，使用
emit
通知界面刷新；

FetchFailedEvent
：加载失败，置空
PersonalResponse
的个人信息对象，并且标记加载状态为失败。

class PersonalBloc extends Bloc<PersonalEvent, PersonalResponse> {
 final String userId;
 PersonalEntity? _personalProfile;
 PersonalBloc(PersonalResponse initial, {required this.userId})
 : super(initial) {
 on<FetchEvent>((event, emit) {
 getPersonalProfile(userId);
 });
 on<FetchSucessEvent>((event, emit) {
 emit(PersonalResponse(
 personalProfile: _personalProfile,
 status: LoadingStatus.success,
 ));
 });
 on<FetchFailedEvent>((event, emit) {
 emit(PersonalResponse(
 personalProfile: null,
 status: LoadingStatus.failed,
 ));
 });
 on<RefreshEvent>((event, emit) {
 getPersonalProfile(userId);
 });
 add(FetchEvent());
 }

 void getPersonalProfile(String userId) async {
 _personalProfile = await JuejinService().getPersonalProfile(userId);
 if (_personalProfile != null) {
 add(FetchSucessEvent());
 } else {
 add(FetchFailedEvent());
 }
 }
}

在构造函数中我们直接请求数据（也可以让界面控制）。页面的实现和之前

GetX

的类似（详见：

再仿个人主页来看 GetX 和 Provider 之间的 PK

），只是我们使用

BlocBuilder

来完成。代码如下：

class PersonalHomePage extends StatelessWidget {
 PersonalHomePage({Key? key}) : super(key: key);
 final personalBloc = PersonalBloc(
 PersonalResponse(
 personalProfile: null,
 status: LoadingStatus.loading,
 ),
 userId: '70787819648695');

 @override
 Widget build(BuildContext context) {
 return BlocBuilder<PersonalBloc, PersonalResponse>(
 bloc: personalBloc,
 builder: (_, personalResponse) {
 print('build PersonalHomePage');
 if (personalResponse.status == LoadingStatus.loading) {
 return Center(
 child: Text('加载中...'),
 );
 }
 if (personalResponse.status == LoadingStatus.failed) {
 return Center(
 child: Text('请求失败'),
 );
 }
 PersonalEntity personalProfile = personalResponse.personalProfile!;
 return Stack(
 children: [
 CustomScrollView(
 slivers: [
 _getBannerWithAvatar(context, personalProfile),
 _getPersonalProfile(personalProfile),
 _getPersonalStatistic(personalProfile),
 ],
 ),
 Positioned(
 top: 40,
 right: 10,
 child: IconButton(
 onPressed: () {
 personalBloc.add(FetchEvent());
 },
 icon: Icon(
 Icons.refresh,
 color: Colors.white,
 ),
 ),
 ),
 ],
 );
 },
 buildWhen: (previous, next) {
 if (previous.personalProfile == null || next.personalProfile == null) {
 return true;
 }
 return previous.personalProfile!.userId != next.personalProfile!.userId;
 },
 );
 }
 
 // 其他代码略
}