这篇文章主要为大家介绍了Flutter StreamBuilder实现局部刷新实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前言
在flutter项目中,页面内直接调用setState
方法会使得页面重新执行build
方法,导致内部组件被全量刷新,造成不必要的性能消耗。出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作。
包括Provider
、ValueNotifier
和StatefulBuilder
等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求。有兴趣了解StatefulBuilder
局部刷新方法可以点击《Flutter StatefulBuilder 实现局部刷新》进行查看,本文记录的是通过StreamBuilder
来实现局部刷新的方法。
StreamBuilder 简介
StreamBuilder
组件的源代码如下,其中包含了四个参数:
const StreamBuilder({
Key? key,
this.initialData,
Stream<T>? stream,
required this.builder,
}) : assert(builder != null),
super(key: key, stream: stream);
key : 组件的键值
initialData : 初始值数据,用于确保第一帧有可用数据显示,否则将使用 null 值构建第一帧
stream : 用于监听自己创建的数据流
builder : 必传参数,返回一个小部件用于页面构建
其中builder
包含了两个参数,一个页面的context,另一个是当前快照信息:
typedef AsyncWidgetBuilder<T> = Widget Function(BuildContext context, AsyncSnapshot<T> snapshot);
final AsyncWidgetBuilder<T> builder;
StreamBuilder的实际应用
StreamBuilder
组件在实际应用中主要分成以下操作:
1、声明一个StreamController
类型的控制器;
2、将需要局部刷新数据的组件嵌套在StreamBuilder
组件内,接收信息;
3、往StreamBuilder
里添加数据,并通知StreamBuilder
重新构建;
4、关流,避免内存泄漏。
int a = 0;
// 1、声明一个StreamController类型的控制器,命名为streamController;
final StreamController<int> streamController = StreamController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 2、将需要局部刷新数据的组件嵌套在StreamBuilder组件内,并接收信息;
StreamBuilder<int>(
stream: streamController.stream,
initialData: a,
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
return Text('a : $a');
},
),
ElevatedButton(
onPressed: () {
a++;
setState(() {});
},
child: Text('setState'),
),
ElevatedButton(
onPressed: () {
a++;
// 3、往`StreamBuilder`里添加数据,并通知`StreamBuilder`重新构建;
streamController.add(a);
},
child: Text('streamBuilder'),
),
],
),
),
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
// 4、关流,避免内存泄漏
streamController.close();
}
点击第一个ElevatedButton
按钮后,页面执行setState(() {})
方法,通过系统的Flutter Performance工具我们可以捕获到组件刷新的情况如下,整个页面被重新构建,这种情况下性能消耗较大。
点击第二个ElevatedButton
按钮后,页面执行streamController.add(a)
方法,通过系统的Flutter Performance工具我们可以捕获到组件刷新的情况如下,只有StreamBuilder
组件及其内部组件被重新构建,实现了局部刷新的功能,有效的提高了页面的性能。
总结
为了避免State.setState方法重新构建全局造成的性能消耗,我们可以通过StreamBuilder组件对页面进行局部刷新。
以上就是Flutter StreamBuilder实现局部刷新实例详解的详细内容,更多关于Flutter StreamBuilder局部刷新的资料请关注编程学习网其它相关文章!
本文标题为:Flutter StreamBuilder实现局部刷新实例详解
基础教程推荐
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18
- Android实现短信验证码输入框 2023-04-29
- IOS获取系统相册中照片的示例代码 2023-01-03
- Android Compose自定义TextField实现自定义的输入框 2023-05-13
- Flutter进阶之实现动画效果(三) 2022-10-28
- Android开发Compose集成高德地图实例 2023-06-15
- iOS开发 全机型适配解决方法 2023-01-14
- iOS开发使用XML解析网络数据 2022-11-12
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07