SwiftUI 6.0(iOS 18.0)滚动视图新增的滚动阶段(Scroll Phase)监听功能趣谈

news2024/11/18 6:25:02

在这里插入图片描述

何曾几时,在 SwiftUI 开发中的秃头小码农们迫切需要一种能够读取当前滚动状态的方法。

在这里插入图片描述

在过去,他们往往需要借助于 UIKit 的神秘力量。不过这一切在 SwiftUI 6.0 中已成“沧海桑田”。

在本篇博文中,您将学到如下内容:

  • 1. ScrollView 滚动阶段简介
  • 2. 普度众生的 SwiftUI 6.0
  • 3. 滚动阶段更改上下文(ScrollPhaseChangeContext)
  • 4. 如何监听列表(List)的滚动阶段
  • 总结

相信学完本课后,小伙伴们在需要监听滚动视图滚动阶段的应用场景中定能得心应手、游刃有余!

那还等什么呢?让我们马上开始吧!Let‘s go!!!😃


1. ScrollView 滚动阶段简介

所谓滚动阶段(Scroll Phase)是指滚动视图在滚动前、滚动中以及滚动后所处的不同阶段。

早在 macOS 10.9+ 的 CoreGraphics 中就有滚动阶段的概念了:

在这里插入图片描述
在这里插入图片描述

如果我们能及时的读取各个滚动阶段的值,我们就可以根据它们为滚动视图提供更加“银杏化”的定制和更流畅滚动附加体验。

在 SwiftUI 6.0 之前,我们无法使用行之有效的方法来读取滚动视图当前所处的滚动阶段,只有委身救助于 UIKit 的秉轴持钧。

然而,这一切在 SwiftUI 6.0 中有了翻天覆地的变化!

2. 普度众生的 SwiftUI 6.0

自从 SwiftUI 6.0(iOS 18.0)开始,“顿悟”的苹果终于提供滚动阶段的监听功能了。

一方面,我们有了描述滚动阶段的新类型 ScrollPhase:

在这里插入图片描述

它包含 5 个枚举值分别对应于 5 种滚动阶段:

@frozen public enum ScrollPhase : Equatable {
    case idle
    case tracking
    case interacting
    case decelerating
    case animating
    
    public var isScrolling: Bool { get }
}

这些滚动阶段的含义如下所示:

  • Idle - 表示当前滚动视图处于空闲状态,可以认为“嘛事没有”;
  • Tracking - 表示当前用户正轻触滚动视图但并没有开始滚动;
  • Interacting - 表示用户正在开始或继续滚动着视图的内容;
  • Decelerating -表示用户已结束滚动操作,滚动视图的滚动正在减速直至静止状态;
  • Animating - 表示滚动视图被 ScrollPosition 或 ScrollViewReader 类型通过代码动态滚动到了指定的位置;

另一方面,我们有了新的视图改器方法 onScrollPhaseChange 专注于滚动阶段的监听:

在这里插入图片描述

有了以上两者的珠联璧合,现在我们在 SwiftUI 6.0 即可轻而易举的监听任何滚动视图的滚动阶段啦:

struct ContentView: View {
        
    var body: some View {
        ScrollView {
            
            ForEach(1...50, id: \.self) { i in
                Text("Item \(i)")
                    .font(.title)
                    .padding()
                
                Divider()
            }
        
        }
        .onScrollPhaseChange { old, new in
            guard old != new else { return }
            print("new phase: \(new)")
            
        }
    }
}

在 Xcode 16beta 中运行效果如下所示:

在这里插入图片描述

ScrollPhase 类型还提供一个 isScrolling 计算属性,我们可以用它来判断当前是否正在滚动。比如,假若视图正在被滚动我们就“遮挡”它的显示内容:

struct ContentView: View {
    
    @State var isScrolling = false
        
    var body: some View {
        ScrollView {
            
            ForEach(1...50, id: \.self) { i in
                Text("Item \(i)")
                    .font(.title)
                    .padding()
                
                Divider()
            }
            .redacted(reason: isScrolling ? .placeholder : [])
        
        }
        .onScrollPhaseChange { old, new in
            guard old != new else { return }
            print("正在滚动?\(new.isScrolling)")
            isScrolling = new.isScrolling
        }
    }
}

执行效果如下图所示:

在这里插入图片描述

3. 滚动阶段更改上下文(ScrollPhaseChangeContext)

除此之外,SwiftUI 6.0 中新增的 onScrollPhaseChange 修改器还提供另一种重载(Overloading)形式,在该重载方法的闭包中我们会得到一个 ScrollPhaseChangeContext 上下文对象,使用它我们可以更多的掌控滚动的其它全局信息:

在这里插入图片描述

nonisolated
func onScrollPhaseChange(_ action: @escaping (ScrollPhase, ScrollPhase, ScrollPhaseChangeContext) -> Void) -> some View

演示代码如下所示,可以看到在其中我们使用 ScrollPhaseChangeContext 上下文对象打印出了更多的与滚动相关的信息:

struct ContentView: View {        
    var body: some View {
        ScrollView {
            
            ForEach(1...50, id: \.self) { i in
                Text("Item \(i)")
                    .font(.title)
                    .padding()
                
                Divider()
            }        
        }
        .onScrollPhaseChange { old, new, context in
            guard old != new else { return }
            print("\(new)\n\(context)")            
        }
    }
}

运行结果如下所示:

在这里插入图片描述

ScrollPhaseChangeContext(geometry: <ScrollGeometry: contentOffset (0.0, 1694.3333333333333), contentSize (393.0, 4092.0), contentInsets <top: 59.0, leading: 0.0, bottom: 34.0, trailing: 0.0>, containerSize (393.0, 759.0), visibleRect (0.0, 1694.3333333333333, 393.0, 852.0)>, velocity: Optional((0.0, 0.0)))

4. 如何监听列表(List)的滚动阶段

虽然 SwiftUI 6.0 破茧而出的“大杀器” onScrollPhaseChange 对于我们监听滚动状态大有裨益,不过目前它只能应用在 ScrollView 视图的外层。这意味着,如果将其放在 List 上将会“徒劳无功”:

struct ContentView: View {        
    var body: some View {
        List {
            ForEach(1...50, id: \.self) { i in
                Text("Item \(i)")
                    .font(.title)
                    .padding()
            }        
        }
        .onScrollPhaseChange { old, new, context in
            guard old != new else { return }
            print("\(new)\n\(context)")
        }
    }
}

上述代码附着在 List 之上的 onScrollPhaseChange 修改器回调闭包将会无所事事,直接沦为“不舞之鹤”。

诚然我们可以使用 ScrollView 来平替 List,不过如果能在 List 上直接监听滚动阶段岂不更妙?

在 iOS 18.0beta 中,我们可以通过将 List 包裹在 Form 容器中暂时绕开此问题:

struct ContentView: View {        
    var body: some View {
        Form {
            List {
                ForEach(1...50, id: \.self) { i in
                    Text("Item \(i)")
                        .font(.title)
                        .padding()
                }
            }
        }
        .onScrollPhaseChange { old, new, context in
            guard old != new else { return }
            print("\(new)\n\(context)")
        }
    }
}

运行代码可以看到,我们用 onScrollPhaseChange 修改器成功的捕获到了 List 中滚动阶段的改变以及其它滚动信息:

在这里插入图片描述

我不确定这一情况在 iOS 18.0 正式版中是否能够修复,让我们拭目以待吧!

总结

在本篇博文中,我们介绍了 SwiftUI 6.0(iOS 18.0)滚动视图最新的滚动阶段(Scroll Phase)监听功能,并讨论了如何在原本不支持该功能的列表(List)上使用它。

感谢观赏,再会啦!😎

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

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

相关文章

Python入门 2024/7/6

目录 数据容器入门 列表的定义语法 基本语法 嵌套列表 ​编辑 列表的下表索引 ​编辑 列表的常用操作 列表的常见方法 查找元素的下标 修改下标索引的值 插入元素 追加元素 追加一批元素 删除元素 删除某元素在列表中的第一个匹配项 清空列表内容 统计元素在…

【Unity URP】通过代码动态添加URP渲染通道RendererFeature

URP的渲染通道RendererFeature可以很方便的实现一些渲染问题,比如渲染顺序问题,遮挡后的材质替换等等。 那么我们如何通过代码来动态添加和修改呢? 首先我们需要获取到当前的URP配置文件,在对配置文件进行添加 1.通过反射获取当前UniversalRendererData 我们通过Graphic…

Day05-03-Nexus仓库

Day05-03-Nexus仓库 05-nexus-仓库1. 概述2. 极速部署指南2.1 下载2.2 部署2.3 配置2.4 连接使用nexus2.4 编译与测试 3. 总结 05-nexus-仓库 1. 概述 背景: maven编译的时候&#xff0c;npm/cnpm编译&#xff0c;需要下载大量的依赖包。这些依赖包在每一次构建的时候都需要使…

解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

异常 当打开Docker Desktop时候&#xff0c;启动docker引擎时&#xff0c;提示 加粗样式文本信息 Docker Desktop - WSL distro terminated abruptly A WSL distro Docker Desktop relies on has exited unexpectedly. This usually happensas a result of an external entit…

.net 调用海康SDK的跨平台解决方案

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔序言 上2篇海康SDK使用以及常见的坑…

C++11 shared_ptr---面试常考

shared_ptr简介 共享对其所指堆内存空间的所有权&#xff0c;当最后⼀个指涉到该对象的shared_ptr不再指向他时&#xff0c;shared_ptr会⾃动析构所指对象如何判断⾃⼰是否指涉到该资源的最后⼀个&#xff1f;《引⽤计数》 shared_ptr构造函数&#xff0c;使引⽤计数析构函数&…

【docker nvidia/cuda】ubuntu20.04安装docker踩坑记录

docker nvidia 1.遇到这个错误&#xff0c;直接上魔法(科学上网) OpenSSL SSL_connect: Could not connect to nvidia.github.io:443 这个error是运行 NVIDIA官方docker安装教程 第一个 curl 命令是遇到的 2. apt-get 更新 sudo apt update遇到 error https://download.do…

横截面交易策略:概念与示例

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

考CFA ESG踩过的坑,想考CFA ESG的同学,可以收藏

考CFA ESG踩过的坑 考证也是蹭热点&#xff0c; 2020年&#xff0c;那时是云&#xff0c;阿里云&#xff0c;腾讯云&#xff0c;华为云竞相绽放&#xff0c; 再过点时间&#xff0c;好像安全方面的证书&#xff0c;如油炸爆米花一样&#xff0c;噼里啪啦地蹦了出来&#xff0…

matlab 抛物线图像绘制

抛物线图像绘制 x^2y4绘制结果 x^2y4 clc,clear,close all; length10; % 创建一个范围内的 x 和 y 值 x linspace(-length, length, 1000); y linspace(-length, length, 1000);% 创建一个网格来表示 x 和 y 值的组合 [X, Y] meshgrid(x, y);% 计算方程的左边和右边的值 LH…

AIGC | 在机器学习工作站安装NVIDIA CUDA® 并行计算平台和编程模型

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x02.初识与安装 CUDA 并行计算平台和编程模型 什么是 CUDA? CUDA&#xff08;Compute Unified Device Architecture&#xff09;是英伟达&#xff08;NVIDIA&#xff09;推出的并行计算平台和编…

Docker 部署 Nacos v2.3.2 版本

文章目录 Github官网文档Nacos 生态图Nacos Dockerdocker-compose.ymlapplication.propertiesNacos 官方示例 Github https://github.com/alibaba/nacos 官网 https://nacos.io/ 文档 https://nacos.io/docs/latest/what-is-nacos/ Nacos 生态图 Nacos Docker 镜像&…

基于java+springboot+vue实现的图书商城管理系统(文末源码+Lw)283

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本图书商城管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…

【数据分享】全国乡村旅游重点镇(乡)数据(Excel/Shp格式/免费获取)

之前我们分享过从我国文化和旅游部官网整理的2018-2023年我国50个重点旅游城市星级饭店季度经营状况数据&#xff08;可查看之前发布的文章&#xff09;&#xff01;文化和旅游部官网上也分享有很多与旅游相关的常用数据&#xff0c;我们基于官网发布的名单文件整理得到全国乡村…

数据挖掘与分析——深度学习算法应用

1. TensorFlow框架的基本使用&#xff08;5-1&#xff09; 获取训练数据 构建一个简单的线性模型&#xff1a;W&#xff0c;b为参数&#xff0c;W2&#xff0c;b1&#xff0c;运用tf.random.normal() 产生1000个随机数&#xff0c;产生x,y数据。 用matplotlib库&#xff0c;…

【Android】Android基础--显式Intent和隐式Intent

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

【JavaEE精炼宝库】文件操作(1)——基本知识 | 操作文件——打开实用性编程的大门

目录 一、文件的基本知识1.1 文件的基本概念&#xff1a;1.2 树型结构组织和目录&#xff1a;1.3 文件路径&#xff08;Path&#xff09;&#xff1a;1.4 二进制文件 VS 文本文件&#xff1a;1.5 其它&#xff1a; 二、Java 操作文件2.1 方法说明&#xff1a;2.2 使用演示&…

电脑刚删除的文件怎么恢复?可使用这几种恢复方法!

在日常生活和工作中&#xff0c;我们时常会在电脑上进行各种文件操作&#xff0c;包括删除不需要的文件。然而&#xff0c;有时候我们可能会误删一些重要的文件&#xff0c;或者在删除后立刻意识到这些文件的重要性。 那么&#xff0c;电脑刚删除的东西怎么恢复呢&#xff1f;本…

Spark快速大数据分析PDF下载读书分享推荐

《Spark 快速大数据分析》是一本为 Spark 初学者准备的书&#xff0c;它没有过多深入实现细节&#xff0c;而是更多关注上层用户的具体用法。不过&#xff0c;本书绝不仅仅限于 Spark 的用法&#xff0c;它对 Spark 的核心概念和基本原理也有较为全面的介绍&#xff0c;让读者能…

多功能实用工具箱,实用工具箱提供了从日常,图片,查询、设备、特色、提取等多方面的功能,操作简单,即点即用,避免您下载超多应用的难题,应用体积轻巧,界面简洁。

今天给大家分享手机工具软件合集&#xff0c;明天想看什么软件&#xff0c;在评论区留言吧&#xff01; 软件链接&#xff1a;4款万能玩机工具&#xff0c;一网打尽&#xff0c;快来看看&#xff01; 实用工具箱 这是一款多功能实用工具箱&#xff0c;实用工具箱提供了从日常…