在Flutter中,可以使用BlocBuilder
或StreamBuilder
来监听流并更新UI。以下是一个使用BlocBuilder
的示例:
首先,创建一个Bloc类,该类负责管理业务逻辑和状态:
import 'dart:async';
class MyBloc {
final _controller = StreamController();
Stream get stream => _controller.stream;
void fetchData() {
// 模拟异步获取数据
Future.delayed(Duration(seconds: 2), () {
_controller.sink.add('Data from stream');
});
}
void dispose() {
_controller.close();
}
}
然后,在你的UI层使用BlocBuilder
来监听流并更新UI:
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
final MyBloc bloc = MyBloc();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bloc Example'),
),
body: Center(
child: BlocBuilder(
bloc: bloc,
builder: (BuildContext context, String data) {
if (data == null) {
return CircularProgressIndicator();
} else {
return Text(data);
}
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
bloc.fetchData();
},
child: Icon(Icons.refresh),
),
);
}
@override
void dispose() {
bloc.dispose();
super.dispose();
}
}
在上面的示例中,MyBloc
类维护了一个StreamController
,用于发布数据流。fetchData
方法模拟了一个异步操作并在完成后使用_controller.sink.add
将数据添加到流中。
在UI层,我们使用BlocBuilder
来监听流并根据数据的变化来更新UI。在builder
回调中,我们根据数据是否为null来决定显示进度指示器还是显示数据。
最后,我们在floatingActionButton
中调用bloc.fetchData
方法来触发数据的获取。
需要注意的是,在组件销毁时,我们需要调用bloc.dispose
来关闭流和释放资源,以避免内存泄漏。