Flutter StreamBuilder实现局部刷新实例详解

 更新时间:2022年08月24日 11:48:51   作者:Zheng  
这篇文章主要为大家介绍了Flutter StreamBuilder实现局部刷新实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗。出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作。

包括ProviderValueNotifierStatefulBuilder等在内的技术方案,都能够帮助我们实现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局部刷新的资料请关注脚本之家其它相关文章!

相关文章

  • Kotlin开发中与if等价的takeIf与takeUnless详解

    Kotlin开发中与if等价的takeIf与takeUnless详解

    这篇文章主要介绍了Kotlin开发中与if等价的takeIf与takeUnless使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • Android Secret Code(输入字符弹出手机信息)详解

    Android Secret Code(输入字符弹出手机信息)详解

    这篇文章主要介绍了Android Secret Code(输入字符弹出手机信息)详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • Android动态权限申请实现步骤分解

    Android动态权限申请实现步骤分解

    对于一些危险权限在AndroidManifest清单文件中申请之后,还需要得到用户的许可并打开,才算是真正的开启了这个权限。所以可以使用动态申请权限,对于某个功能,如果需要开启某个权限,在用户使用它之前,弹窗提示用户是否要开启这个权限
    2023-04-04
  • Android自定义ViewGroup实现右滑进入详情

    Android自定义ViewGroup实现右滑进入详情

    这篇文章主要为大家详细介绍了Android如何通过自定义ViewGroup实现右滑进入详情效果,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-01-01
  • android图像绘制(三)画布刷屏问题记录

    android图像绘制(三)画布刷屏问题记录

    在canvas中绘制动态图的时候,如果使用了一个固定的背景图片,只有一个小小的精灵在移动!这样的情况下却不得不在没帧中重新绘制背景图片,使得效率降低,本文章只是记录一下,并不是解决方法感兴趣的朋友可以了解下
    2013-01-01
  • android开发教程之自定义控件checkbox的样式示例

    android开发教程之自定义控件checkbox的样式示例

    这篇文章主要介绍了android自定义checkbox的样式示例,需要的朋友可以参考下
    2014-03-03
  • android的RecyclerView实现拖拽排序和侧滑删除示例

    android的RecyclerView实现拖拽排序和侧滑删除示例

    在平时开发应用的时候,经常会遇到列表排序、滑动删除的需求。这篇文章主要介绍了android的RecyclerView实现拖拽排序和侧滑删除示例,有兴趣的可以了解一下。
    2017-02-02
  • 深入了解OkHttp3之Interceptors

    深入了解OkHttp3之Interceptors

    这篇文章主要介绍了深入了解OkHttp3之Interceptors,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Kotlin中Lambda表达式与高阶函数使用分析讲解

    Kotlin中Lambda表达式与高阶函数使用分析讲解

    lambda 本质上是可以传递给函数的一小段代码,Kotlin 与 Java 中的 Lambda 有一定的区别,除了对 lambda 的全面支持外,还有内联函数等简洁高效的特性。下面我们来仔细看一下
    2022-12-12
  • RecyclerView实现流式标签单选多选功能

    RecyclerView实现流式标签单选多选功能

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。这篇文章主要介绍了RecyclerView实现的流式标签单选多选功能,需要的朋友可以参考下
    2019-11-11

最新评论