Flutter最小刷新范围探索ValueListenableBuilder使用详解

目录
  • 引子
  • ValueListenableBuilder
    • 如何用
    • 怎么做
  • 不足点

引子

管理对象太多?

刷新管理太麻烦 ?

Flutter刷新范围控制不好 ?

不妨看看本文 , 希望提供给你一些思路吧 !

说起 Flutter 刷新, 你的第一印象是什么 ? setState ? 是的, 只要使用过 Flutter 的人, 第一印象都必然是 setState , 但是由于 setState 滥用的问题, 性能问题就脱颖而出.

因此产出了诸如 Fish_redux 之流, 这些框架尽可能的使用 StatelessWidget 而由框架本身来引导刷新. 那么, 我们除了框架, 有没有办法来控制 Flutter 的刷新呢?

ValueListenableBuilder

ValueListenableBuilder 是基于 Flutter 自身特点构建的一个 widget. 它借助了观察者模式 , 高效率的引导 Flutter 框架来刷新指定位置. 在繁杂的界面中, 细粒化的更新特定的 widget. 我们接下来, 举例子并分析一下它是如何用,怎么做的吧!

如何用

这里我们通过一个简单的例子 - 计数器, 它的作用是每点击一次按钮, 数字便会增加一.

 Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(num.toString()),
            IconButton(
              color: Colors.blue,
              onPressed: () {
                if (mounted) {
                  setState(() {
                    num++;
                  });
                }
              },
              icon: const Icon(Icons.add),
            ),
          ],
        ),
      ),
    )

我们打开Android studio 自带的工具 Flutter Performance , 打开 Track widget rebuilds. 记录下点击十次后, 整体界面的刷新次数.

结果上, 我们发现了整体页面的每个组件都刷新了十次. 我们再通过 ValueListenableBuilder 来重构页面, 并同样刷新十次

    final ValueNotifier<int> notifier = ValueNotifier(0);
    Scaffold{
        body: Column{
            ...
            children: [
                ValueListenableBuilder<int>(
                    valueListenable: notifier,
                    builder: (BuildContext context, value, Widget? child) {
                        return Text(
                            value.toString(),
                            style: const TextStyle(fontSize: 20),
                        );
                    },
                ),
                ...
            ]
        }
    }

这次我们可以看到,除了 ValueListenableBuilder 和 Text 本身刷新了十次, 其余的 widget没有再刷新. 因此, 我们可以推断出层级越深、组件越多, 我们优化的效果也就越明显

那么, 这是怎么做到的呢 ? 让我们来一起探究一下 .

怎么做

ValueListenableBuilder 是一个 StatefulWidget. 也就是说它具备刷新的能力, 它通过监听 ValueListenable 对象的变换.我们将目光转到它的 State 中. 在 initState 中 , 也就是最初加载这个 widget 的时候. 我们初始化了 value 的值, 并且增加了一个监听.

    @override
    void initState() {
        super.initState();
        value = widget.valueListenable.value;
        widget.valueListenable.addListener(_valueChanged);
    }

在这个监听中, 我们发现只要 valueListenable 的值发生变化, 便会立即通知当前 state 刷新. 因此它的刷新范围只限制于局部.

 void _valueChanged() {
    setState(() { value = widget.valueListenable.value; });
  }

同时, 它在外部可能刷新修改 valueListenable 对象的时候, 移除了之前的监听. 并增加了新的监听对象. 其余的步骤还是和之前一样.

  @override
  void didUpdateWidget(ValueListenableBuilder&lt;T&gt; oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.valueListenable != widget.valueListenable) {
      oldWidget.valueListenable.removeListener(_valueChanged);
      value = widget.valueListenable.value;
      widget.valueListenable.addListener(_valueChanged);
    }
  }

通过这一系列的操作, Flutter 实现了点对点的刷新方案.

不足点

虽然 ValueListenableBuilder 已经解决了大部分刷新场景需要定向刷新的需求, 但是它刷新的颗粒度还不够. 如果我们针对每个 widget 都需要不同的对象通知更新, 那么, 我们就要自己手动创建 N 个通知者, 这给开发带来了难以预料的维护难度. 因此, 在实际运用的场景中, 我们更偏向于单个不与其他业务接触的业务或者一个自行维护的widget. 尽可能减少业务复杂度. 为了解决这种问题, Getx、Bloc、Provider都算比较好的状态管理框架.

以上就是Flutter最小刷新范围探索ValueListenableBuilder使用详解的详细内容,更多关于Flutter ValueListenableBuilder的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter listview如何实现下拉刷新上拉加载更多功能

    目录 下拉刷新 RefreshIndicator 上拉加载更多 总结: 下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新,下面们还是先来看下如何使用吧 RefreshIndicator 构造方法: const RefreshIndicator({ Key key, @required this.child, this.disp

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

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

  • Flutter 给列表增加下拉刷新和上滑加载更多功能

    有状态组件 当 Flutter 的页面需要动态更新数据的时候,就会涉及到 UI 组件需要根据数据变化更新,此时也就意味着组件有了"状态".这就类似 React 的类组件和函数组件(只是后续 React 使用了勾子函数实现了函数组件也可以有状态).在 Flutter 中,组件也分为无状态组件(StatelessWidget)和有状态组件(StatefulWidget),一般尽量使用无状态组件.但是如果组件本身需要维护自身状态的时候,就需要使用有状态组件了.有状态组件的定义形式如下: //

  • Flutter实现下拉刷新和上拉加载更多

    本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在listview外面包裹一层RefreshIndicator,然后在RefreshIndicator里面实现onRefresh方法. body: movieList.length == 0           ? new Center(child: new CircularProgressIndicator())    

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

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

  • Flutter最小刷新范围探索ValueListenableBuilder使用详解

    目录 引子 ValueListenableBuilder 如何用 怎么做 不足点 引子 管理对象太多? 刷新管理太麻烦 ? Flutter刷新范围控制不好 ? 不妨看看本文 , 希望提供给你一些思路吧 ! 说起 Flutter 刷新, 你的第一印象是什么 ? setState ? 是的, 只要使用过 Flutter 的人, 第一印象都必然是 setState , 但是由于 setState 滥用的问题, 性能问题就脱颖而出. 因此产出了诸如 Fish_redux 之流, 这些框架尽可能的使用 S

  • Flutter runApp到渲染上屏分析详解

    目录 起源 分析准备 ensureInitialized scheduleAttachRootWidget scheduleWarmUpFrame 总结 起源 flutter作为一个跨平台的框架,在绘制上体现出了它跨平台的良好性能.那么,它是如何从runApp()后 绘制上屏的呢?本文将与你一起去探索这一过程. ps: 为了思维不中断, 本文仅对整体流程作分析,不会深入分析具体实现 我们运行一个flutter app ,入口一定是从runApp() 中进行的. 那么flutter 在runApp

  • Flutter应用框架搭建之屏幕适配详解

    目录 原理 flutter_screenutil 添加依赖 初始化 使用 效果 其他 Api 因移动设备的多样性,特别是 Android 的碎片化严重,存在各种各样的分辨率,而 Flutter 跨平台开发又需同时支持 Android 和 iOS ,为尽可能的还原设计图效果提升用户体验,屏幕适配就势在必行了. Flutter 暂时没有官方的屏幕适配方案,在 Flutter 项目开发中目前大部分的适配方案都是通过比例来进行适配,是一个通用的适配方法,该适配方法也在前端.Android.iOS.小程序

  • Flutter利用Canvas绘制精美表盘效果详解

    目录 前言 初始化 面板 刻度 刻度线 刻度值 指针 时针 分针 秒针 动起来 前言 趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘. 最终实现的效果还不错,如下: 前面说到使用 Canvas 实现该表盘效果,而在 Flutter 中使用 Canvas 更多的则是继承 CustomPainter 类实现 paint 方法,然后在 CustomPaint 中使用自定义实现的 CustomPainter. 比如这里创建的 DialPainter 使用如下: @overrid

  • Flutter Module添加到iOS项目示例详解

    目录 1. 创建flutter module 2. flutter 模块嵌入原生应用 3. flutter模块和原生通信 小结 1. 创建flutter module 摘要:我们实际开发开始作为混合开发,可能会把一个模块使用flutter开发,之后嵌入到iOS项目中.比如说我们的商城模块使用flutter开发,这样android和iOS都可以使用. 我们通常会把iOS项目和 flutter module在同一目录,我们创建一个商城的module flutter create --template

  • Python探索之SocketServer详解

    SocketServer,网络通信服务器,是Python标准库中的一个模块,其作用是创建网络服务器.SocketServer模块定义了一些类来处理诸如TCP.UDP.UNIX流和UNIX数据报之上的同步网络请求. SocketServer模块处理网络请求的功能,可以通过两个主要的类来实现:一个是服务器类,一个是请求处理类. 服务器类 处理通信问题,如监听一个套接字并接收连接等: 请求处理类 处理"协议"问题,如解释到来的数据.处理数据并把数据发回给客户端等. 这种实现将服务器的实现过程

  • Android Flutter实现GIF动画效果的方法详解

    目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF

  • Android Flutter实现搜索的三种方式详解

    目录 示例 1 :使用搜索表单创建全屏模式 编码 示例 2:AppBar 内的搜索字段(最常见于娱乐应用程序) 编码 示例 3:搜索字段和 SliverAppBar 编码 结论 示例 1 :使用搜索表单创建全屏模式 我们要构建的小应用程序有一个应用程序栏,右侧有一个搜索按钮.按下此按钮时,将出现一个全屏模式对话框.它不会突然跳出来,而是带有淡入淡出动画和幻灯片动画(从上到下).在圆形搜索字段旁边,有一个取消按钮,可用于关闭模式.在搜索字段下方,我们会显示一些搜索历史记录(您可以添加其他内容,如建

  • Flutter学习LogUtil封装与实现实例详解

    目录 一. 为什么要封装打印类 二. 需要哪些类 三. 打印输出的抽象类 四. 格式化日志内容 格式化堆栈 堆栈裁切工具类 格式化堆栈信息 格式化JSON 五. 需要用到的常量 六. 为了控制多个打印器的设置做了一个配置类 七. Log的管理类 九. 调用LogUtil 十. 定义一个Flutter 控制台打印输出的方法 十一. 现在使用前初始化log打印器一次 使用 一. 为什么要封装打印类 虽然 flutter/原生给我们提供了日志打印的功能,但是超出一定长度以后会被截断 Json打印挤在一

  • flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

随机推荐