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

这篇具有很好参考价值的文章主要介绍了Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

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

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

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

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言 Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言 Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

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

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

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

ShrinkWrappingViewportViewport 的不同之处在于 :

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

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言 Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性,flutter,javascript,开发语言

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

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

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

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

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

所以,到这里你应该知道了 shrinkWrap 的实现逻辑和作用,其实本次主要也是想通过这个 new feature 变动,带大家重新认识下 shrinkWrap因为接下来,它就不再叫 shrinkWrap 了,或者你以后也应该很少用到它文章来源地址https://www.toymoban.com/news/detail-594264.html

到了这里,关于Flutter 小技巧之滑动控件即将“抛弃” shrinkWrap 属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF 在ScrollViewer控件内部的Slider控件无法触摸滑动

    WPF中在ScrollViewer控件内部的Slider控件无法触摸滑动,是由于ScrollViewer控件默认设置了IsManipulationEnabled为True。 WPF ScrollViewer的IsManipulationEnabled属性是用来控制触摸手势操作的开关。当这个属性设置为true时,用户可以使用触摸手势(如滑动、缩放)来操作控件,而当设置为false时,

    2024年02月15日
    浏览(63)
  • 【flutter滑动拼图验证码】

    Java后台使用aj_captcha插件,提供/captcha/get(获取captcha底图和拼块图片)、/captcha/check(验证拼图偏移量)这两个接口。并且这个插件在GitHub上有源码。 1.先准备好aj_captcha的工具类: 2.绘制验证弹窗 3.使用: 滑块拼图验证码

    2024年02月14日
    浏览(47)
  • Flutter 滑动控制

    以PageView为例 pv基于scrollable进行定制,四个完成功能的主要组件:ScrollNotification、RawGestureDetector、ScrollController和ScrollPosition、ViewPort ScrollNotification:封装Notificaiton获得该类通知,根据通知信息内的偏移判断页面是否切换,然后回调onPageChanged RawGestureDetector:手势收集类,Scro

    2024年02月14日
    浏览(47)
  • PyQt5之滑块及滑动条控件

    在Input Widgets分组中,QSlider和QScrollBar是两个滑动型输入组件 QSlider和ScrollBar都是从QAbstractSlider类继承来的,拥有一些相同的属性,通过属性编辑器可以查看效果。 属性 含义 minimum、maximum 输入范围的最小值和最大值 singleStep 单步长,拖动标尺上的滑块,或按下左、右键时的最

    2024年02月11日
    浏览(449)
  • Flutter页面滑动回调处理解决方法

    TabBarView 是 Flutter 中的一个用于显示选项卡视图的小部件。它通常与 TabBar 一起使用,用于实现选项卡式导航,允许用户在不同的选项卡之间切换内容。 以下是 TabBarView 的详细介绍: 基本用法: TabBarView 允许你在不同的选项卡之间切换内容。它接受一个 controller 属性,用于控

    2024年02月08日
    浏览(39)
  • Unity实现一个可扩展的UGUI无限滑动列表控件

    12月20日新增 增加一个可收缩的滑动列表,适用于游戏中的任务系统,成就等 使用说明 创建时需要两个模板slot,一个是button,另一个则是btn下显示的cell 配置如下图添加 ExpandableView 脚本,新增的IsDefaultExpand用来控制是否展开 11月28日新增 增加可调节的顶部间隙和左侧间隙 采

    2024年01月19日
    浏览(42)
  • 【Unity-UGUI控件全面解析】| Slider 滑动条组件详解

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:

    2024年02月12日
    浏览(52)
  • flutter在windows系统上实现左右水平滑动问题

    在个问题在github也有记录:https://github.com/flutter/flutter/issues/105095 就是flutter使用listview等可以滑动的组件来左右滚动的时候,不能正常工作,也就是无效,所以下面大家开始讨论这个问题。 翻阅大家讨论的内容,发现有的windows11是可以正常工作的,但是需要加上一个滚动条和

    2024年01月21日
    浏览(35)
  • Flutter笔记:手写并发布一个人机滑动验证码插件

    Flutter笔记 手写一个人机滑块验证码 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/133529459 写 Flutter 项目时,遇到需要滑块验证码功能。滑块验证码属于人机验证码的一种,看起来像是在一个图片

    2024年02月07日
    浏览(36)
  • Qt 重写QSlider简单实现滑动解锁控件(指定百分比回弹效果)

    组件效果图: 应用场景:  用于滑动解锁相关场景,Qt的控件鼠标监听机制对于嵌入式设备GUI可触摸屏依旧可用。 实现方式: 主要是通过继承QSlider以及搭配使用QStyleOptionSlider来实现效果。 注意细则: QStyleOptionSlider是用于定制空白区域是否可移动滑块,根据需求可舍弃。 组

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包