当前位置:主页 > android教程 > Flutter StreamBuilder局部刷新

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

发布:2023-03-02 16:30:01 59


给网友们整理相关的编程文章,网友郗俊民根据主题投稿了本篇教程内容,涉及到Flutter、StreamBuilder局部刷新、Flutter、StreamBuilder、Flutter StreamBuilder局部刷新相关内容,已被139网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

Flutter StreamBuilder局部刷新

前言

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

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


相关文章

  • Android Flutter实现自定义下拉刷新组件

    发布:2023-03-02

    在Flutter开发中官方提供了多平台的下拉刷新组件供开发者使用。本文将改造一下这些组件,实现自定义的下拉刷新组件,感兴趣的可以了解一下


  • Android开发Flutter 桌面应用窗口化实战示例

    发布:2023-03-13

    这篇文章主要为大家介绍了Android开发Flutter 桌面应用窗口化实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • 详解flutter中常用的container layout实例

    发布:2023-03-07

    这篇文章主要为大家介绍了详解flutter中常用的container layout实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • Flutter 异步编程之单线程下异步模型图文示例详解

    发布:2023-03-10

    这篇文章主要为大家介绍了Flutter 异步编程之单线程下异步模型图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • Flutter异步操作实现流程详解

    发布:2023-03-13

    在Flutter中,借助 FutureBuilder 组件和 StreamBuilder 组件,可以非常方便地完成异步操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧


  • Flutter实现矩形取色器的封装

    发布:2023-03-02

    这篇文章主要为大家详细介绍了Flutter实现矩形取色器的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • UI 开源组件Flutter图表范围选择器使用详解

    发布:2023-03-04

    这篇文章主要为大家介绍了UI 开源组件Flutter图表范围选择器使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • Android Flutter实现上拉加载组件的示例代码

    发布:2023-03-03

    既然列表有下拉刷新外当然还有上拉加载更多操作了,本次就为大家详细介绍如何利用Flutter实现为列表增加上拉加载更多的交互,感兴趣的可以了解一下


网友讨论