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局部刷新的资料请关注脚本之家其它相关文章!

相关文章

  • Android开发岛屿数量算法示例解析

    Android开发岛屿数量算法示例解析

    这篇文章主要为大家介绍了Android开发岛屿数量算法示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Flutter实现仿微信分享功能的示例代码

    Flutter实现仿微信分享功能的示例代码

    Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件可以实现微信分享功能,本文将具体介绍实现的示例代码,需要的可以参考一下
    2022-01-01
  • Android  Activity生命周期和堆栈管理的详解

    Android Activity生命周期和堆栈管理的详解

    这篇文章主要介绍了Android Activity生命周期和堆栈管理的详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Kotlin 使用Lambda来设置回调的操作

    Kotlin 使用Lambda来设置回调的操作

    这篇文章主要介绍了Kotlin 使用Lambda来设置回调的操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • Android实现点击切换视图并跳转传值

    Android实现点击切换视图并跳转传值

    这篇文章主要为大家详细介绍了Android实现点击切换视图并跳转传值,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • Android编程设置全屏的方法实例详解

    Android编程设置全屏的方法实例详解

    这篇文章主要介绍了Android编程设置全屏的方法,结合实例形式较为详细的分析了Android设置全屏的两种常见技巧,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • Flutter开发之Widget自定义总结

    Flutter开发之Widget自定义总结

    这篇文章主要给大家介绍了关于Flutter开发中Widget自定义的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Flutter具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Android自定义UI手势密码简单版

    Android自定义UI手势密码简单版

    这篇文章主要为大家详细介绍了Android自定义UI手势密码简单版
    2016-10-10
  • Android自定义图片轮播Banner控件使用解析

    Android自定义图片轮播Banner控件使用解析

    这篇文章主要为大家详细介绍了Android自定义图片轮播Banner控件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Android如何给Textview添加菜单项详解(Java)

    Android如何给Textview添加菜单项详解(Java)

    TextView是android里面用的最多的控件,TextView类似一般UI中的Label,TextBlock等控件,只是为了单纯的显示一行或多行文本,下面这篇文章主要给大家介绍了关于Android如何给Textview添加菜单项的相关资料,需要的朋友可以参考下
    2022-01-01

最新评论