Flutter性能揭秘之RepaintBoundary

作者：xuyisheng

Flutter会在屏幕上绘制Widget。如果一个Widget的内容需要更新，那就只能重绘了。尽管如此，Flutter同样会重新绘制一些Widget，而这些Widget的内容仍有部分未被改变。这可能会影响应用程序的执行性能，有时影响会非常巨大。如果您正在寻找一种方法，来防止不必要的部分重绘，您可以考虑利用RepaintBoundary。

在这篇博客理，我们将探讨Flutter中的RepaintBoundary。我们将看到如何实现RepaintBoundary的演示程序以及如何在您的flutter应用程序中使用它。

RepaintBoundary

RepaintBoundary类是Null安全的。首先，你需要了解什么是Flutter中的RepaintBoundary。它是一个为它的Child设置不同的展示层级的Widget。这个Widget为它的Child设置了一个不同的展示层级，如果一个子树与它周围的部分相比，会在意想不到的短时间内重新绘制，Flutter建议你使用RepaintBoundary来进一步提高性能。

为什么需要使用RepaintBoundary呢。

Flutter Widget与RenderObjects有关。一个RenderObject有一个叫做paint的函数，它被用来执行绘画过程。尽管如此，无论相关组件的内容是否发生变化，都可以使用绘制方法。这是因为，如果其中一个RenderObjects被设定为dirty，Flutter可能会对类似Layer中的其他RenderObjects进行重新绘制。当一个RenderObject需要利用RenderObject.markNeedsPaint进行重绘的时候，它就会建议它最接近的前辈进行重绘。祖先也会对它的前辈做同样的事情，直到根RenderObject。当一个RenderObject的paint策略被启动时，它在类似层中的所有相关RenderObjects都将被重新paint。

而有时，当一个RenderObject应该被重绘时，类似层中的其他RenderObjects不应该被重绘，因为它们的绘制产物保持不变。因此，如果我们只是对某些RenderObjects进行重绘，那会更好。利用RepaintBoundary可以帮助我们在渲染树上限制markNeedsPaint的生成，在渲染树下限制paintChild的生成。

RepaintBoundary可以将先前的渲染对象与相关的渲染对象解耦。通过这种方式，只对内容发生变化的子树进行重绘是可行的。利用RepaintBoundary可以进一步提高应用程序的执行效率，特别是当不应该被重绘的子树需要大量的工作来重绘时。

我们将做一个简单的演示程序，背景是利用CustomPainter绘制的，有10000个椭圆。同时还有一个光标，在客户接触到屏幕的最后一个位置后移动。下面是没有RepaintBoundary的代码。

示例

在正文中，我们将创建一个Stack widget。在里面，我们将添加一个StackFit.expand，并添加两个部件：_buildBackground()，和_buildCursor()。我们将定义以下代码。

Stack(fit: StackFit.expand,children: <Widget>[_buildBackground(),_buildCursor(),],
),

_buildBackground() widget

在_buildBackground()小组件中。我们将返回CustomPaint() widget。在里面，我们将在绘画器上添加BackgroundColor类。我们将在下面定义。另外，我们将添加isComplex参数为true，这意味着是否提示这个图层的绘画应该被缓存，willChange是false意味着是否应该告诉光栅缓存，这个绘画在下一帧可能会改变。

Widget _buildBackground() {return CustomPaint(painter:  BackgroundColor(MediaQuery.of(context).size),isComplex: true,willChange: false,);
}

BackgroundColor class

我们将创建一个BackgroundColor来扩展CustomPainter。

import 'dart:math';
import 'package:flutter/material.dart';class BackgroundColor extends CustomPainter {static const List<Color> colors = [Colors.orange,Colors.purple,Colors.blue,Colors.green,Colors.purple,Colors.red,];Size _size;BackgroundColor(this._size);@overridevoid paint(Canvas canvas, Size size) {final Random rand = Random(12345);for (int i = 0; i < 10000; i++) {canvas.drawOval(Rect.fromCenter(center: Offset(rand.nextDouble() * _size.width - 100,rand.nextDouble() * _size.height,),width: rand.nextDouble() * rand.nextInt(150) + 200,height: rand.nextDouble() * rand.nextInt(150) + 200,),Paint()..color = colors[rand.nextInt(colors.length)].withOpacity(0.3));}}@overridebool shouldRepaint(BackgroundColor other) => false;
}

_buildCursor() widget

在这个Widget，我们将返回Listener Widget。我们将在onPointerDown/Move方法中添加_updateOffset()组件，并添加CustomPaint。在里面，我们将添加一个Key和CursorPointer类。我们将在下面定义。另外，我们将添加ConstrainedBox()。

Widget _buildCursor() {return Listener(onPointerDown: _updateOffset,onPointerMove: _updateOffset,child: CustomPaint(key: _paintKey,painter: CursorPointer(_offset),child: ConstrainedBox(constraints: BoxConstraints.expand(),),),);
}

CursorPointer class

我们将创建一个CursorPointer来扩展CustomPainter。

import 'package:flutter/material.dart';class CursorPointer extends CustomPainter {final Offset _offset;CursorPointer(this._offset);@overridevoid paint(Canvas canvas, Size size) {canvas.drawCircle(_offset,10.0,new Paint()..color = Colors.green,);}@overridebool shouldRepaint(CursorPointer old) => old._offset != _offset;
}

当我们运行应用程序时，我们应该得到下面屏幕的输出，如屏幕下的视频。如果你试图在屏幕上移动指针，应用程序将非常滞后，因为它重新绘制背景，需要昂贵的计算。

下面，我们将添加RepaintBoundary。解决上述问题的答案是将CustomPaint部件包装成RepaintBoundary的子Widget。

Widget _buildBackground() {return RepaintBoundary(child: CustomPaint(painter:  BackgroundColor(MediaQuery.of(context).size),isComplex: true,willChange: false,),);
}

当我们运行应用程序时，我们应该得到屏幕的输出，就像屏幕下面的视频一样。有了这个简单的改变，现在当Flutter重绘光标时，背景就不需要重绘了。应用程序应该不再是滞后的了。

整个代码如下所示。

import 'package:flutter/material.dart';
import 'package:flutter_repaint_boundary_demo/background_color.dart';
import 'package:flutter_repaint_boundary_demo/cursor_pointer.dart';class HomePage extends StatefulWidget {@overrideState createState() => new _HomePageState();
}class _HomePageState extends State<HomePage> {final GlobalKey _paintKey = new GlobalKey();Offset _offset = Offset.zero;Widget _buildBackground() {return RepaintBoundary(child: CustomPaint(painter:  BackgroundColor(MediaQuery.of(context).size),isComplex: true,willChange: false,),);}Widget _buildCursor() {return Listener(onPointerDown: _updateOffset,onPointerMove: _updateOffset,child: CustomPaint(key: _paintKey,painter: CursorPointer(_offset),child: ConstrainedBox(constraints: BoxConstraints.expand(),),),);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(automaticallyImplyLeading: false,backgroundColor: Colors.cyan,title: const Text('Flutter RepaintBoundary Demo'),),body: Stack(fit: StackFit.expand,children: <Widget>[_buildBackground(),_buildCursor(),],),);}_updateOffset(PointerEvent event) {RenderBox? referenceBox = _paintKey.currentContext?.findRenderObject() as RenderBox;Offset offset = referenceBox.globalToLocal(event.position);setState(() {_offset = offset;});}
}

总结

在文章中，我解释了Flutter中RepaintBoundary的基本结构；你可以根据你的选择来修改这个代码。这是我对RepaintBoundary On User Interaction的一个小的介绍，它在使用Flutter时是可行的。

Android 学习笔录

Android 性能优化篇：https://qr18.cn/FVlo89
Android 车载篇：https://qr18.cn/F05ZCM
Android 逆向安全学习笔记：https://qr18.cn/CQ5TcL
Android Framework底层原理篇：https://qr18.cn/AQpN4J
Android 音视频篇：https://qr18.cn/Ei3VPD
Jetpack全家桶篇（内含Compose）：https://qr18.cn/A0gajp
Kotlin 篇：https://qr18.cn/CdjtAF
Gradle 篇：https://qr18.cn/DzrmMB
OkHttp 源码解析笔记：https://qr18.cn/Cw0pBD
Flutter 篇：https://qr18.cn/DIvKma
Android 八大知识体：https://qr18.cn/CyxarU
Android 核心笔记：https://qr21.cn/CaZQLo
Android 往年面试题锦：https://qr18.cn/CKV8OZ
2023年最新Android 面试题集：https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题：https://qr18.cn/FTlyCJ
音视频面试题锦：https://qr18.cn/AcV6Ap

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/49898.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Flume、Logstash、Filebeat对比

Flume、Logstash、Filebeat对比

Flume、Logstash和Filebeat是三种常用的数据采集工具，用于收集、聚合和传输日志和事件数据。它们在功能、特性和适用场景上有一些区别。以下是对它们的简要对比： Apache Flume： 用途：主要用于大规模数据采集、传输和聚合，特别适用于将数据送入Hadoop生态系统。特点： 提供…
阅读更多...
springboot集成Graphql相关问题汇总

springboot集成Graphql相关问题汇总

1、idea在debug运行时出现java.lang.NoClassDefFoundError:kotlin/collections/AbstractMutableMap 解决&#xff1a;禁用idea dubugger中kotlin coroutine agent 见&#xff1a;https://stackoverflow.com/questions/70796177/after-the-spring-boot-source-code-is-compile…
阅读更多...
Mongodb 删除文档Delete与Remove的区别

Mongodb 删除文档Delete与Remove的区别

db.collection.remove() 此方法已被 mongosh 弃用 已弃用的方法替代方法db.collection.remove()db.collection.deleteOne() db.collection.deleteMany() db.collection.findOneAndDelete() db.collection.bulkWrite() 5.0版本更改。 db.collection.remove(<query>,…
阅读更多...
Android studio之 build.gradle配置

Android studio之 build.gradle配置

在使用Android studio创建项目会出现两个build.gradle&#xff1a; 一. Project项目级别的build.gradle &#xff08;1&#xff09;、buildscript{}闭包里是gradle脚本执行所需依赖&#xff0c;分别是对应的maven库和插件。 闭包下包含&#xff1a; 1、repositories闭包 2、d…
阅读更多...
16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及JDBC示例（4）

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及JDBC示例（4）

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…
阅读更多...
git 查看某个分支是从哪个分支拉出来的

git 查看某个分支是从哪个分支拉出来的

原文链接&#xff1a;https://blog.csdn.net/allanGold/article/details/102478157 git reflog show 分支名git reflog --datelocal | grep 分支名git reflog --datelocal | grep 分支名 $ git reflog --datelocal | grep release3 5c50761 HEAD{Thu Jun 29 12:53:45 2023}: c…
阅读更多...
3D旅游情景实训教学展示

3D旅游情景实训教学展示

随着科技的不断发展&#xff0c;情景实训教学在教育领域中的应用越来越广泛。通过虚拟现实技术&#xff0c;3D视觉技术&#xff0c;计算机技术等为学生提供了一个身临其境的学习环境&#xff0c;让他们能够在模拟的场景中学习和实践&#xff0c;从而更好地理解和掌握知识。 3D虚…
阅读更多...
Docker搭建LNMP运行Wordpress平台

Docker搭建LNMP运行Wordpress平台

一、项目1.1 项目环境1.2 服务器环境1.3 任务需求 二、Linux 系统基础镜像三、Nginx1、建立工作目录2、编写 Dockerfile 脚本3、准备 nginx.conf 配置文件4、生成镜像5、创建自定义网络6、启动镜像容器7、验证 nginx 四、Mysql1、建立工作目录2、编写 Dockerfile3、准备 my.cnf…
阅读更多...
红黑树遍历与Redis存储

红黑树遍历与Redis存储

引言 在计算机科学领域&#xff0c;红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉查找树&#xff0c;它能在O(log n)的时间复杂度内完成插入、删除和查找操作。由于其高效性和可预测性的性能&#xff0c;红黑树在许多领域都得到广泛应用。本文将重点介绍红…
阅读更多...
Ubuntu系统安装之后首需要做的事情

Ubuntu系统安装之后首需要做的事情

Ubuntu系统的初步环境搭建 1、换源2、显卡3、浏览器4、输入法5、终端6、ROS7、VSCode8、设置时间与win一致9、 TimeShift10、 Anaconda&#xff08;考虑装不装&#xff09; 1、换源 点开Software&&Update&#xff0c;找到Ubuntu Software中的Download from&#xff0c…
阅读更多...
html5提供的FileReader是一种异步文件读取文件中的数据

html5提供的FileReader是一种异步文件读取文件中的数据

前言&#xff1a;FileReader是一种异步文件读取机制&#xff0c;结合input:file可以很方便的读取本地文件。 input:file 在介绍FileReader之前&#xff0c;先简单介绍input的file类型。 <input type"file" id"file"> input的file类型会渲染为一个按…
阅读更多...
Web3.0

Web3.0

一、Web3.0是什么 Web3.0&#xff08;有时称为“分布式Web”或“去中心化Web”&#xff09;是对互联网的下一代演进的概念。它代表了一种更加分散、去中心化和用户掌控的互联网模式&#xff0c;与传统的Web2.0模型有很大不同。 以下是Web3.0的一些关键特征和概念&#xff1a;…
阅读更多...
c++ java rgb与nv21互转

c++ java rgb与nv21互转

目录 jni函数 c++ rgb转nv21，可以转，不报错，但是转完只有黑白图 java yuv420保存图片,先转nv21，再保存ok： c++ yuv420月bgr互转，测试ok jni函数 JNIEXPORT void JNICALL Java_com_tencent_blazefacencnn_BlazeFaceNcnn_encode(JNIEnv *env,jobject thiz, jobject in…
阅读更多...
Qt-事件循环与QtConcurrent、QThread结合使用时注意的点

Qt-事件循环与QtConcurrent、QThread结合使用时注意的点

QEventLoop和QtConcurrent可以结合使用达到主线程ui不阻塞同步执行的效果&#xff0c;但是要小心避坑&#xff0c;查看如下代码&#xff1a; QEventLoop loop; QtConcurrent::run([&]() {doSomething();loop.quit(); }); loop.exec();上述写法存在两个问题&#xff1a; Q…
阅读更多...
Linux学习记录——이십오 多线程（2）

Linux学习记录——이십오 多线程（2）

文章目录 1、理解原生线程库线程局部存储 2、互斥1、并发代码&#xff08;抢票&#xff09;2、锁3、互斥锁的实现原理 3、线程封装1、线程本体2、封装锁 4、线程安全5、死锁6、线程同步1、条件变量1、接口2、demo代码 1、理解原生线程库 线程库在物理内存中存在&#xff0c;也…
阅读更多...
[bug日志]springboot多模块启动，在yml配置启动端口8081，但还是启动了8080

[bug日志]springboot多模块启动，在yml配置启动端口8081，但还是启动了8080

【问题描述】 配置的启动端口是8081&#xff0c;实际启动端口是8080 【解决方法】 1.检查application.yml的配置是否有错误(配置项中&#xff0c;显示白色就错&#xff0c;橙色无措) 2.检查pom.xml的打包方式配置项配置&#xff0c;主pom.xml中的配置项一般为&#xff1a;&l…
阅读更多...
【hello git】初识Git

【hello git】初识Git

目录 一、简述Git 二、Linux 下 Git 的安装&#xff1a;CentOS 2.1 基本命令 2.2 示例&#xff1a; 三、Linux 下 Git 的安装&#xff1a;ubuntu 3.1 基本命令 3.2 示例&#xff1a; 一、简述Git Git &#xff1a;版本控制器&#xff0c;记录每次的修改以及版本迭代的一个管…
阅读更多...
day 37 | ● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

day 37 | ● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

1049. 最后一块石头的重量 II 与前一道分割等和子集的思路差不多&#xff0c;都是01背包问题。因为是采用滚动数组的形式&#xff0c;所以必须要倒序遍历才可以。 dp[i]代表着在i的限制下最大的承重。所以另一半就是all - dp【all / 2】 func lastStoneWeightII(stones []int…
阅读更多...
使用自定义 C ++运算符扩展 TorchScript

使用自定义 C ++运算符扩展 TorchScript

使用自定义 C 运算符扩展 TorchScript PyTorch 1.0 版本向 PyTorch 引入了一种新的编程模型&#xff0c;称为 TorchScript 。 TorchScript 是 Python 编程语言的子集&#xff0c;可以通过 TorchScript 编译器进行解析&#xff0c;编译和优化。 此外&#xff0c;已编译的 Torch…
阅读更多...
流媒体内容分发终极解决方案：当融合CDN与P2P视频交付结合

流媒体内容分发终极解决方案：当融合CDN与P2P视频交付结合

前言 随着互联网的发展&#xff0c;流媒体视频内容日趋增多&#xff0c;已经成为互联网信息的主要承载方式。相对传统的文字&#xff0c;图片等传统WEB应用&#xff0c;流媒体具有高数据量&#xff0c;高带宽、高访问量和高服务质量要求的特点&#xff0c;而现阶段互联网“尽力…
阅读更多...
最新文章

Copyright @ 2022~2023