Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性

news2024/11/24 3:00:27

相信对于 Flutter 开发的大家来说, ListView 的 shrinkWrap 配置都不会陌生,如下图所示,每当遇到类似的 unbounded error 的时候,总会有第一反应就是给 ListView 加上 shrinkWrap: true 就可以解决问题,那为什么现在会说 shrinkWrap 即将被“抛弃”呢?

其实说完全“抛弃”也不大严谨,从目前官方的规划来看, shrinkWrap 配置将从滑动控件里弃用,因为团队觉得现阶段的开发人员大多数时候不知道它的实际含义,只是单纯使用它解决问题,在使用过程中容易出现错误的性能损耗而不自知

当然,这个提议并不是说完全废除 shrinkWrap 的支持,而且类似通过全新的 Widget 来替代,用更形象的命名,例如 NonLazyListView 等。

目前这个提议的等级是 P1 ,所以如果不意外的话,它的推进会很快

那么 shrinkWrap 为什么会带来性能问题?它常用在什么场景?为什么会需要被提高到 P1 来进行调整?

首先我们需要简单理解 Flutter 滑动列表的实现和 shrinkWrap 的作用,在《带你了解 Flutter 中的滑动列表实现》里我们介绍过,Flutter 里的滑动列表是由 ViewportScrollable 和相应的 Sliver 三部分组成

ListView 为例,如下图所示是 ListView 滑动过程的变化,其中:

  • 绿色的 Viewport 就是我们看到的列表窗口大小;
  • 紫色部分就是处理手势的 Scrollable,让黄色部分 SliverListViewport 里产生滑动;
  • 黄色的部分就是 SliverList , 当我们滑动时其实就是它在 Viewport 里的位置发生了变化;

所以 ListView 之所以可以“无限”滑动,就是因为首先有一个固定大小「窗口」, 只有在进入和靠近「窗口」的 Item 才会被布局渲染,从而保证了列表的性能。

但是这也带来了一个问题,如下图 1 的代码所示,它就因为 Column 的特性,没办法直接计算得到 Viewport 的大小,所以会抛出错误。

有时候我们会如上图 2 所示,通过给 ListView 加一个 Expanded 来解决,这样 ListView 会充满 Column 的剩余空间,从而得到一个固定的 Viewport 大小。

但是当我们希望此时 ListView 不充满,还可以居中显示的时候,就会采用如上图 3 所示那样,添加一个 shrinkWrap: true

虽然这个例子没有意义,但是它展示了 shrinkWrap 的“主要”场景,另外 shrinkWrap 也常被用于 ListView 嵌套 ListView 这种不规范使用的场景中

shrinkWrap 的实现原理是什么?简单来说,现阶段 shrinkWrap:true 的时候,在滑动控件内部会采用一个特殊的 ShrinkWrappingViewport 「窗口」进行实现。

ShrinkWrappingViewportViewport 的不同之处在于 :

  • Viewport 是填充满主轴方向的大小
  • ShrinkWrappingViewport 是调整自身大小去匹配主轴方向中 Item 的大小,而这种“收缩”的行为成本会变高,因为窗口大小需要通过 child 去“确定”。

例如,如下图所示,在 ListView 里,我们将 itemCount 修改为 400 ,然后打印每个 Item 的 build ,由于 shrinkWrap 的作用,可以看到 400 个 child 都被输出。

同样,在 Inspector 的 Widget Tree 里可以看到 400 个 child 都构建完成,尽管他们还远没有在 ViewPort 展示出来,所以 shrinkWrapListView 失去了懒加载的作用。

相反,如下图代码所示,如果去掉 shrinkWrap ,在 Expand 的作用下 ListView 有了固定大小的 ViewPort ,此时就算是 itemCount 是 400 ,但是也只会根据 ViewPort 构建所需的 19 个 child 。

就算是因为滑动产生变化,正常情况下的 ListView 也保持着「固定」的长度,例如滑动到 160 的 index 的时候,此时开始的 ListTitle 的 index 是 135 ,而不会像 shrinkWrap 一样保持着全员 child 的构建。

如何要深究的话,其中关键点之一就在于 updateOutOfBandData 方法实现的不同,在普通 Viewport 里, updateOutOfBandData 方法只是用于计算 maxScrollExtent ,而如下图 1 所示,ShrinkWrappingViewport 里会对每个 child 的 maxPaintExtent 进行累计。

累计之后的得到的 _shrinkWrapExtent 最终会转化为 ShrinkWrappingViewport 自己的 size ,这也是 ShrinkWrappingViewport 为什么可以根据 child 调整「窗口」大小的原因。

所以,在此之前可能开发者经常通过简单的 shrinkWrap 来解决问题,而比较少思考 shrinkWrap 的实现原理,或者说缺乏理解它的作用,从而带来了一些隐形的性能问题而不自知,所以这也是为什么这次会有该调整的原因:

shrinkWrap 迁移到全新控件可以更直观让大家理解其作用,而其实大部分使用 shrinkWrap 的场景可以被其他实现替代。

  • 例如前面提到的 ListView 嵌套 ListView 的场景,与其对通过配置 shrinkWrap 来实现,不如通过 CustomScrollView 结合不同 SliverList 或者其他 Sliver 组建完成组合。

  • 而如果 child 并不多,其实也可以直接通过 SingleChildScrollView + Column 来实现,它在一定程度上效果和 shrinkWrap 类似。

所以,到这里你应该知道了 shrinkWrap 的实现逻辑和作用,其实本次主要也是想通过这个 new feature 变动,带大家重新认识下 shrinkWrap因为接下来,它就不再叫 shrinkWrap 了,或者你以后也应该很少用到它

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux进程控制(一)---进程创建和终止(写时拷贝,exit与_exit等)

目录 进程创建 fork()函数 子进程如何继承父进程的数据 1.创建时拷贝分离 2.写时拷贝★ 进程终止 进程终止时,操作系统做了什么? 进程终止的常见方式 代码运行完毕,结果正确 退出码★ 代码运行完毕,结果不正确 代码异…

Redis 读写分离 使用redisTemplate执行lua脚本时,报错处理

项目框架说明 项目配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.4</version></parent>....<dependency><groupId>org.springfra…

Mac苹果装机工作必备软件推荐,十大效率神器让你的 Mac 雄起

Mac笔记本固然好用&#xff0c;但还是会有一些使用中的痛点&#xff0c;下面给大家推荐10款最常用的提高mac使用效率的软件 一、Magnet Pro - 窗口大小布局位置控制 这款软件可以让你的Mac像Windows一样&#xff0c;通过拖动窗口实现窗口最大化、左右半屏、上下半屏、1/4窗口…

Ubuntu18.04下的labelImg使用教程

Ubuntu18.04下的labelImg使用教程 1、安装 # 下载labelImg git clone https://github.com/Ruolingdeng/labelImg.git# 配置环境 sudo apt-get install pyqt5-dev-tools sudo pip3 install -r requirements/requirements-linux-python3.txt make qt5py3# 运行 python3 labelImg.…

mysql 1 -- 数据库介绍、mysql 安装及设置

Linux 安装 mysql 1、数据库&#xff08;mysql&#xff09; 数据文件 - 数据库过了系统 2、c/s mysql 服务器 mysql 客户端 ip port : 3306 3、关系型 于 非关系型数据库&#xff08;nosql&#xff09; nosql可以解决一些关系型数据库所无法实现的场景引用。 一、数据库介绍 …

什么是 Elasticsearch 索引?

作者&#xff1a;David Brimley 索引这个术语在科技界已经被用满了。 如果你问大多数开发人员什么是索引&#xff0c;他们可能会告诉你索引通常指的是关系数据库 (RDBMS) 中与表关联的数据结构&#xff0c;它提高了数据检索操作的速度。 但什么是 Elasticsearch 索引&#xff…

Spark(29):Spark内存管理

目录 0. 相关文章链接 1. 堆内和堆外内存规划 1.1. 堆内内存 1.2. 堆外内存 2. 内存空间分配 2.1. 静态内存管理 2.2. 统一内存管理 3. 存储内存管理 3.1. RDD 的持久化机制 3.2. RDD的缓存过程 3.3. 淘汰与落盘 4. 执行内存管理 4.1. Shuffle Write 4.2. Shuffl…

【Fiddler】Fiddler实现mock测试(模拟接口数据)

软件接口测试过程中&#xff0c;经常会遇后端接口还没有开发完成&#xff0c;领导就让先介入测试&#xff0c;然后缩短项目时间&#xff0c;有的人肯定会懵&#xff0c;接口还没开发好&#xff0c;怎么介入测试&#xff0c;其实这就涉及到了我们要说的mock了。 一、mock原理 m…

自学成才的黑客有很多,掌握方法很重要,给你黑客入门与进阶建议

建议一&#xff1a;黑客七个等级 黑客&#xff0c;对很多人来说充满诱惑力。很多人可以发现这门领域如同任何一门领域&#xff0c;越深入越敬畏&#xff0c;知识如海洋&#xff0c;黑客也存在一些等级&#xff0c;参考知道创宇 CEO ic&#xff08;世界顶级黑客团队 0x557 成员&…

如何解决VScode远程下载插件不了的问题?如何手动安装插件?

当我们在使用VScode进行远程操作时&#xff0c;在安装我们所需要的一些插件时&#xff0c;可能会出现如下图&#xff0c;一直卡在安装中....明明只有小几十MB&#xff0c;却一连好几个小时都一动不动。像这种情况&#xff0c;就需要我们进行手动安装该插件。 插件网站&#xff…

照度与感光度(Lux)

何谓照度&#xff1f;照度&#xff08;LUX&#xff09;数值达到多少为低照度&#xff1f;多少数值能适应摄取影像的周围环境&#xff1f; 照度是反映光照强度的一种单位&#xff0c;其物理意义是照射到单位面积上的光通量&#xff0c;照度的单位是每平方米的流明&#xff08;L…

智能精密配电柜在机房低压配电中的运用与发展趋势

安科瑞 华楠 摘 要&#xff1a;随着科学技术的深入发展&#xff0c;各项领域逐渐突破技术限制&#xff0c;充分发挥智能化优势&#xff0c;体现智能与精密的高端价值。以医院机房配电为研究背景&#xff0c;分析配电柜的发展趋势。目前&#xff0c;机房配电中&#xff0c;利用…

sort部分

sort主要针对文件内容的操作&#xff0c;对文件内容进行匹配或者过滤&#xff0c;排序 grep 过滤 针对文本内容进行过滤&#xff0c;也就是查找 -i&#xff1a;忽略大小写默认的&#xff0c;可以不加 -n&#xff1a;显示匹配的行号 -c&#xff1a;只统计匹配的行数 &#…

22款奔驰E350升级ACC自适应巡航系统,解放您的双脚

有的时候你是否厌倦了不停的刹车、加油&#xff1f;是不是讨厌急刹车&#xff0c;为掌握不好车距而烦恼&#xff1f;如果是这样&#xff0c;那么就升级奔驰原厂ACC自适应式巡航控制系统&#xff0c;带排队自动辅助和行车距离警报功能&#xff0c;感受现代科技带给你的舒适安全和…

web中引入live2d的moc3模型-(调整样式)

文章目录 src文件夹修改底部背景色修改背景图片修改canvas大小和定位 src文件夹 基本所有的样式都在src文件夹下的ts文件中&#xff0c;而我们每次修改样式时&#xff0c;记得重新build&#xff0c;已让页面重新加载修改打包后的js文件 npm run build修改底部背景色 默认是黑…

最强,自动化测试框架总结整理,测试进阶之路卷起来...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 自动化测试框架是…

Pytorch:搭建卷积神经网络完成MNIST分类任务:

2023.7.18 MNIST百科&#xff1a; MNIST数据集简介与使用_bwqiang的博客-CSDN博客 数据集官网&#xff1a;MNIST handwritten digit database, Yann LeCun, Corinna Cortes and Chris Burges MNIST数据集获取并转换成图片格式&#xff1a; 数据集将按以图片和文件夹名为标签的…

二、DDL-4.表操作-修改删除

一、修改 1、往表中添加字段 e.g.为emp表增加一个新的字段“昵称”为nickname&#xff0c;类型为varchar(20) alter table emp add nickname varchar(20) comment 昵称; 2、修改表中字段 e.g.将emp表的nickname字段修改为username&#xff0c;类型为varchar(30) alter table e…

TCP/IP网络编程 第十六章:关于IO流分离的其他内容

分离I/O流 两次I/O流分离 我们之前通过2种方法分离过IO流&#xff0c;第一种是第十章的“TCPI/O过程&#xff08;Routine&#xff09;分离”。这种方法通过调用fork函数复制出1个文件描述符&#xff0c;以区分输入和输出中使用的文件描述符。虽然文件描述符本身不会根据输入和输…

基于主从博弈的主动配电网阻塞管理的论文复现——附Matlab代码

目录 文章摘要&#xff1a; 编程思路&#xff1a; 研究背景&#xff1a; 基于主从博弈的电网阻塞管理&#xff1a; 算例介绍&#xff1a; Matlab运行结果展示&#xff1a; Matlab代码数据分享&#xff1a; 文章摘要&#xff1a; 随着需求侧灵活性资源在配电网中的渗透率…