Flutter StreamBuilder组件实现局部刷新示例讲解

目录
  • 一、前言
  • 二、StreamBuilder 简介
  • 三、StreamBuilder的实际应用
  • 总结

一、前言

在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗。出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作。包括Provider、ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求。

本文记录的是通过StreamBuilder来实现局部刷新的方法。

二、StreamBuilder 简介

StreamBuilder组件的源代码如下,其中包含了四个参数:

const StreamBuilder({
     Key? key,
     this.initialData,
     Stream<t>? stream,
     required this.builder,
   }) : assert(builder != null),
        super(key: key, stream: stream);
</t>

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    目录 前言 StreamBuilder 简介 StreamBuilder的实际应用 总结 前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作. 包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求.有兴趣了解StatefulBuild

  • Flutter StreamBuilder组件实现局部刷新示例讲解

    目录 一.前言 二.StreamBuilder 简介 三.StreamBuilder的实际应用 总结 一.前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作.包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求. 本文记录的是通过St

  • Android 组件Gallery和GridView示例讲解

    Android Gallery和GridView组件: Gallery 画廊 Gallery是一个内部元素可以水平滚动,并且可以把当前选择的子元素定位在它中心的布局组件. 我们还是直接看看例子的运行效果. 下面上代码,相关解释都放在代码里了. 1.建立一个新项目 HelloGallery 2.拷贝wallpaper_0.jpg-wallpaper_9.jpg 10个图片文件到res/drawable目录 3.res/layout/main.xml文件的内容如下: <?xml version=&quo

  • Flutter StatefulBuilder实现局部刷新实例详解

    目录 前言 页面的全量刷新 StatefulBuilder简介 StatefulBuilder的实际应用 总结 前言 flutter项目中,在页面数据较多的情况下使用全量刷新对性能消耗较大且容易出现短暂白屏的现象,出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新操作. GlobalKey.ValueNotifier和StreamBuilder等技术方案都可以实现Flutter页面的局部刷新,本文主要记录的是通过StatefulBuilder组件来实现局部刷新的方法. 页

  • Flutter实现局部刷新

    在Flutter中,如果我们想要更新页面中的某个widget的状态的话,一般会使用setState方法重走build方法来刷新.当页面布局复杂的时候,这样肯定是不行的. 下面提供了两种局部刷新的方式,通过provider和StreamBuilder来实现局部刷新 1.通过provider刷新 首先在pubspec.yaml中添加provider依赖 # provider provider: ^3.1.0 下面通过provider来实现一个发送验证码的案例. 创建一个TimerModel文件 im

  • flutter局部刷新的实现示例

    局部刷新 我们在做项目的时候,都需要单独的去刷新一个值,而不是把整个界面都重绘.大家都知道setState是进行重绘的一个方法,他会执行生命周期的一个build,这将会使得整个界面来进行重绘.当然我们也会说把他进行状态管理,因为我个人不是很喜欢用provider进行状态管理,而是使用steam和event_bus进行传值和管理,当然自然的代码就会多了,所以我现在也在寻找provider更简单的方法,当然这里就不说了,在跟其他人聊的时候,都说好久没有更新了.那是因为有点忙,也变得懒了.现在刚好趁着

  • Flutter实现文本滚动高亮效果的示例讲解

    目录 前言 功能实现 前言 最近有个需求是人工语音播放时文本能随语音朗读时像歌词滚动的效果. 原本第一考虑的时能随时间字体渐变成更改后的颜色, 有比较流畅的走马灯效果. 但最终实践了几次后发现要能够逐字逐行渐变有一些麻烦, 不好实现. 所以转而变为将字体直接将字体高亮, 一段文本区分成两个部分, 一个部分是高亮文本, 也就是已朗读的部分, 一个部分是剩下未朗读的非高亮文本. 通过时时渲染页面就能达成滚动高亮的效果. 功能实现 因为在Text中会存在两段文本, 所以就不能单只用Text组件, 而改

  • jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?

  • vue实现局部刷新的实现示例

    利用Vue里面的provide+inject组合(走过路过,不要错过) 使用2.2.0 新增的provide / inject控制<router-view>的显示隐藏 在App.vue中使用provide //App.vue <template> <div> <router-view v-if="isRouterAlive"></router-view> </div> </template> <s

  • angular2组件中定时刷新并清除定时器的实例讲解

    实例如下: import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush }) export class xxxComponent{ private timer; constructor(private ref : ChangeD

随机推荐