给网友们整理相关的编程文章,网友郗俊民根据主题投稿了本篇教程内容,涉及到Flutter、StreamBuilder局部刷新、Flutter、StreamBuilder、Flutter StreamBuilder局部刷新相关内容,已被139网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。
Flutter StreamBuilder局部刷新
前言
在flutter项目中,页面内直接调用setState
方法会使得页面重新执行build
方法,导致内部组件被全量刷新,造成不必要的性能消耗。出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作。
包括Provider
、ValueNotifier
和StatefulBuilder
等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求。有兴趣了解StatefulBuilder
局部刷新方法可以点击《Flutter StatefulBuilder 实现局部刷新》进行查看,本文记录的是通过StreamBuilder
来实现局部刷新的方法。
StreamBuilder 简介
StreamBuilder
组件的源代码如下,其中包含了四个参数:
const StreamBuilder({ Key? key, this.initialData, Stream? stream, required this.builder, }) : assert(builder != null), super(key: key, stream: stream);
key : 组件的键值
initialData : 初始值数据,用于确保第一帧有可用数据显示,否则将使用 null 值构建第一帧
stream : 用于监听自己创建的数据流
builder : 必传参数,返回一个小部件用于页面构建
其中builder
包含了两个参数,一个页面的context,另一个是当前快照信息:
typedef AsyncWidgetBuilder= Widget Function(BuildContext context, AsyncSnapshot snapshot); final AsyncWidgetBuilder builder;
StreamBuilder的实际应用
StreamBuilder
组件在实际应用中主要分成以下操作:
1、声明一个StreamController
类型的控制器;
2、将需要局部刷新数据的组件嵌套在StreamBuilder
组件内,接收信息;
3、往StreamBuilder
里添加数据,并通知StreamBuilder
重新构建;
4、关流,避免内存泄漏。
int a = 0; // 1、声明一个StreamController类型的控制器,命名为streamController; final StreamControllerstreamController = StreamController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 2、将需要局部刷新数据的组件嵌套在StreamBuilder组件内,并接收信息; StreamBuilder ( stream: streamController.stream, initialData: a, builder: (BuildContext context, AsyncSnapshot 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局部刷新的资料请关注码农之家其它相关文章!