flutter开发实战-StreamBuilder使用介绍及实例
StreamBuilder是一个Widget，它依赖Stream来做异步数据获取刷新widget。
一、Stream
Stream是一种用于异步处理数据流的机制，它允许我们从一段发射一个事件，从另外一段去监听事件的变化.Stream类似于JavaScript中的Promise、Swift中的Future或Java中的RxJava，它们都是用来处理异步事件和数据的。Stream是一个抽象接口，我们可以通过StreamController接口可以方便使用Stream。
- StreamController 流控制器
通过StreamController，我们可以监听暂停、恢复、取消、完成、错误等事件
final streamController = StreamController(
onPause: () => print('Paused'),
onResume: () => print('Resumed'),
onCancel: () => print('Cancelled'),
onListen: () => print('Listens'),
);
streamController.stream.listen(
(event) => print('Event: $event'),
onDone: () => print('Done'),
onError: (error) => print(error),
);
- StreamSink 用作发射事件
StreamSink可以通过streamController获取，streamController.sink。
StreamSink发射事件调用add方法
- Stream 用作事件的监听
Stream 可以通过streamController获取，streamController.stream
Stream 监听则可以调用listen方法
- StreamSubscription 用作管理监听，关闭、暂停等
streamSubscription 通过Stream调用listen获取。streamSubscription有暂停、恢复、关闭、取消等方法。
二、Stream的使用
Stream使用的步骤如下
/// 获取StreamSubscription用作管理监听，关闭暂停等
StreamSubscription<int>? subscription;
/// StreamController
StreamController<int>? streamController = StreamController<int>();
/// StreamSink用作发射事件
StreamSink<int>? get streamSink => streamController?.sink;
/// 获取Stream用作事件监听
Stream<int>? get streamData => streamController?.stream;
/// 使用subscription来监听事件
subscription = streamData?.listen((event) {
// TODO
print("subscription listen event:${event}");
});
// 发射一个事件
streamSink?.add(index);
Stream使用实例完整代码如下
import 'dart:async';
import 'package:flutter/material.dart';
class SteamDemoPage extends StatefulWidget {
const SteamDemoPage({super.key});
@override
State<SteamDemoPage> createState() => _SteamDemoPageState();
}
class _SteamDemoPageState extends State<SteamDemoPage> {
int index = 0;
int listenData = 0;
/// 获取StreamSubscription用作管理监听，关闭暂停等
StreamSubscription<int>? subscription;
/// StreamController
StreamController<int>? streamController = StreamController<int>();
/// StreamSink用作发射事件
StreamSink<int>? get streamSink => streamController?.sink;
/// 获取Stream用作事件监听
Stream<int>? get streamData => streamController?.stream;
@override
void initState() {
// TODO: implement initState
super.initState();
streamController = StreamController<int>();
/// 使用subscription来监听事件
subscription = streamData?.listen((event) {
// TODO
print("subscription listen event:${event}");
setState(() {
listenData = event;
});
});
// 发射一个事件
streamSink?.add(index);
index++;
}
void testStream(BuildContext context) {
// 发射一个事件
streamSink?.add(index);
index++;
print("index -- ${index}");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('HeroPage'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'监听的listenData：${listenData}',
style: TextStyle(
fontSize: 16,
color: Colors.black87,
),
),
SizedBox(height: 30,),
TextButton(
onPressed: () {
testStream(context);
},
child: Container(
height: 46,
width: 150,
color: Colors.lightBlue,
alignment: Alignment.center,
child: Text(
'测试Stream',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
),
],
),
),
);
}
}
最后可以看到效果图，当点击按钮时候，监听的数值更新。
三、StreamBuilder
既然使用了Stream，我们可以StreamBuilder。如果我们再使用setState来刷新，则没有必要使用Stream了。
StreamBuilder是Flutter框架中的一个内置小部件，它可以监测数据流（Stream）中数据的变化，并在数据发生变化时重新构建小部件树。
在StreamBuilder中，当数据流发生变化，Flutter框架会自动传递一个AsyncSnapshot，AsyncSnapshot对象包含Stream中的最新数据以及其他有关数据流信息，如是否处理链接状态、错误信息等。
StreamBuilder(
stream: streamData,
builder: (BuildContext ctx, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Text("没有数据");
} else {
return Text(
'监听的listenData：${snapshot.data}',
style: TextStyle(
fontSize: 16,
color: Colors.black87,
),
);
}
},
),
StreamBuilder的构造方法如下
const StreamBuilder({
super.key,
this.initialData,
super.stream,
required this.builder,
}) : assert(builder != null);
- initialData : 默认初始化数据
- stream : stream事件流对象
- builder : 负责根据不同状态创建对应ui的方法实现
StreamBuilder中的其他方法
- afterConnected:返回一个AsyncSnapshot，当订阅了stream时会回调此AsyncSnapshot
- afterData:返回一个AsyncSnapshot，当stream有事件触发时会回调此AsyncSnapshot
- afterDisconnected:返回一个AsyncSnapshot，当取消订阅stream时会回调此AsyncSnapshot
- afterDone:返回一个AsyncSnapshot，当stream被关闭时会回调此AsyncSnapshot
- afterError:返回一个AsyncSnapshot，stream发生错误时会回调此AsyncSnapshot
四、使用StreamBuilder示例
在上面的示例中，我们可以将Text这个Widget通过StreamBuilder来包裹一下。
代码如下
StreamBuilder(
stream: streamData,
builder: (BuildContext ctx, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Text("没有数据");
} else {
return Text(
'监听的listenData：${snapshot.data}',
style: TextStyle(
fontSize: 16,
color: Colors.black87,
),
);
}
},
),
这里可以将示例中的StreamSubscription移除，暂时用不到了，可以找到StreamBuilder继承的StreamBuilderBase中已经创建了StreamSubscription，并且_subscribe
/// State for [StreamBuilderBase].
class _StreamBuilderBaseState<T, S> extends State<StreamBuilderBase<T, S>> {
StreamSubscription<T>? _subscription; // ignore: cancel_subscriptions
late S _summary;
....
void _subscribe() {
if (widget.stream != null) {
_subscription = widget.stream!.listen((T data) {
setState(() {
_summary = widget.afterData(_summary, data);
});
}, onError: (Object error, StackTrace stackTrace) {
setState(() {
_summary = widget.afterError(_summary, error, stackTrace);
});
}, onDone: () {
setState(() {
_summary = widget.afterDone(_summary);
});
});
_summary = widget.afterConnected(_summary);
}
}
void _unsubscribe() {
if (_subscription != null) {
_subscription!.cancel();
_subscription = null;
}
}
使用StreamBuilder完整示例代码如下
import 'dart:async';
import 'package:flutter/material.dart';
class SteamDemoPage extends StatefulWidget {
const SteamDemoPage({super.key});
@override
State<SteamDemoPage> createState() => _SteamDemoPageState();
}
class _SteamDemoPageState extends State<SteamDemoPage> {
int index = 0;
int listenData = 0;
/// 获取StreamSubscription用作管理监听，关闭暂停等
// StreamSubscription<int>? subscription;
/// StreamController
StreamController<int>? streamController = StreamController<int>();
/// StreamSink用作发射事件
StreamSink<int>? get streamSink => streamController?.sink;
/// 获取Stream用作事件监听
Stream<int>? get streamData => streamController?.stream;
@override
void initState() {
// TODO: implement initState
super.initState();
streamController = StreamController<int>();
/// 使用subscription来监听事件
// subscription = streamData?.listen((event) {
// // TODO
// print("subscription listen event:${event}");
// setState(() {
// listenData = event;
// });
// });
// 发射一个事件
streamSink?.add(index);
index++;
}
void testStream(BuildContext context) {
// 发射一个事件
streamSink?.add(index);
index++;
print("index -- ${index}");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('HeroPage'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: streamData,
builder: (BuildContext ctx, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Text("没有数据");
} else {
return Text(
'监听的listenData：${snapshot.data}',
style: TextStyle(
fontSize: 16,
color: Colors.black87,
),
);
}
},
),
SizedBox(
height: 30,
),
TextButton(
onPressed: () {
testStream(context);
},
child: Container(
height: 46,
width: 150,
color: Colors.lightBlue,
alignment: Alignment.center,
child: Text(
'测试Stream',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
),
],
),
),
);
}
}
https://brucegwo.blog.csdn.net/article/details/136232000
五、小结
flutter开发实战-StreamBuilder使用介绍及实例。
学习记录，每天不停进步。
