SwiftUI 5.0(iOS 17)滚动视图的滚动目标行为(Target Behavior)解惑和实战

在这里插入图片描述

概览

在 SwiftUI 的开发过程中我们常说:“屏幕不够,滚动来凑”。可见滚动视图对于超长内容的呈现有着多么秉轴持钧的重要作用。

在这里插入图片描述

这不,从 SwiftUI 5.0(iOS 17)开始苹果又为滚动视图增加了全新的功能。但是官方的示例可能会让小伙伴们“雾里看花”、不求甚解。所以,本篇博文存在的真谛就尽在于此了!

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

  • 概览
  • 1. 什么是滚动目标行为(Scroll Target Behavior)?
  • 2. scrollTargetLayout 视图修改器到底是干嘛用的?
  • 3. 定制我们自己的 ScrollTargetBehavior 滚动目标行为
  • 总结

相信学完本课后,小伙伴们一定会对 SwiftUI 5.0 中新的 scrollTargetLayout 以及 scrollTargetBehavior 修改器的含义和使用“醍醐灌顶”、如梦初醒!

那还等什么呢?让我们马上进入滚动的世界吧!

Let’s rolling!!!😉


本文对应的视频课在此,欢迎小伙伴们恣意观赏:

SwiftUI 5.0 滚动视图的滚动目标行为解惑和实战


1. 什么是滚动目标行为(Scroll Target Behavior)?

从 SwiftUI 5.0 开始,苹果为滚动视图特地新增了 scrollTargetBehavior 修改器方法:

在这里插入图片描述

使用它我们可以根据滚动轴来设置滚动视图的滚动目标行为(Scroll Target Behavior)。那么,什么是滚动目标行为呢?简单来说,它表示滚动视图中的滚动目标(Scroll Targets)在滚动停止时以何种方式对齐。

import SwiftUIenum ScrollAlignType: Identifiable, CaseIterable {case none, paging, viewvar align: AnyScrollTargetBehavior {switch self {case .none:.init(.viewAligned(limitBehavior: .never))case .paging:.init(.paging)case .view:.init(.viewAligned)}}var title: String {switch self {case .none:"无"case .paging:"按页面"case .view:"按视图"}}var id: Int {title.hashValue}
}struct ContentView: View {@State private var scrollAlignType = ScrollAlignType.nonevar body: some View {ScrollView(.vertical) {ForEach(1...100, id: \.self) { i inText("Item \(i)").font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetBehavior(scrollAlignType.align).padding(.vertical, 20.0).ignoresSafeArea().safeAreaInset(edge: .top) {Picker("滚动目标行为", selection: $scrollAlignType) {ForEach(ScrollAlignType.allCases) { alignType inText(alignType.title).tag(alignType)}}.pickerStyle(.segmented).padding()}}
}#Preview {ContentView()
}

在上面的代码中,我们尝试用三种不同方式来对齐滚动视图中的滚动目标,它们分别是:

  1. 无(滚到哪是哪)
  2. 按页面对齐
  3. 按视图对齐

运行可以发现:前两种滚动对齐效果和我们的想象不谋而合,不过最后一种以视图为基准的对齐却貌似没起到什么作用,这是怎么回事呢?

在这里插入图片描述

2. scrollTargetLayout 视图修改器到底是干嘛用的?

原来,要想以滚动视图内部独立子元素为基准应用滚动目标行为,我们必须明确设置滚动目标(Scroll Targets),这是通过调用 scrollTargetLayout 视图修改器来实现的:

在这里插入图片描述

我们也可以理解为 scrollTargetLayout 方法将最外层的布局配置成了滚动目标布局。所以上面的代码我们需要做如下修正:

ScrollView(.vertical) {ForEach(1...100, id: \.self) { i inText("Item \(i)").font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}// 明确设置滚动目标.scrollTargetLayout()
}
.scrollTargetBehavior(scrollAlignType.align)
.padding(.vertical, 20.0)

重新运行可以看到,以视图为基准的滚动对齐已然生效了:

在这里插入图片描述

另外,如果滚动视图中动态生成的内容需要放在额外惰性容器(比如 LazyVStack 或 LazyHStack)中,我们需要在这些容器外层应用 scrollTargetLayout() 修改器方法:

ScrollView(.vertical) {LazyVStack {ForEach(1...100, id: \.self) { i inText("Item \(i)").font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetLayout()
}
.scrollTargetBehavior(scrollAlignType.align)
.padding(.vertical, 20.0)

有些小伙伴们可能会问:为什么要做这种看似“多此一举”的事呢?

考虑下面这个例子,我们不希望滚动目标行为应用在滚动的头和尾视图上,所以只要在中间滚动内容上启用 scrollTargetLayout 就“水到渠成”啦:

struct AnotherExampleScrollView: View {var body: some View {ScrollView {CustomHeaderView()LazyVStack {// 实际的滚动内容}.scrollTargetLayout()CustomFooterView()}.scrollTargetBehavior(.viewAligned)}
}

到目前为止(iOS 18 beta3),所有滚动目标行为相关的修改器方法都只能直接用在滚动视图(ScrollView)上,而不能用在 List 或 Form 这种内部“间接”使用滚动视图的容器上。

3. 定制我们自己的 ScrollTargetBehavior 滚动目标行为

除了使用 SwiftUI 系统默认的滚动目标行为(Scroll Target Behavior)以外,我们还可以按照实际需求创建特定的滚动对齐行为,这是通过遵循 ScrollTargetBehavior 协议来实现的:

在这里插入图片描述

遵循该协议只需完成一个 updateTarget 方法,在该方法传入的实参中我们可以根据当前滚动目标上下文(TargetContext)来恣意修改滚动目标(ScrollTarget)的位置等信息:

struct CustomScrollTargetBehavior: ScrollTargetBehavior {func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {if context.velocity.dy > 0 {target.rect.origin.y = context.originalTarget.rect.maxY} else if context.velocity.dy < 0 {target.rect.origin.y = context.originalTarget.rect.minY}}
}extension ScrollTargetBehavior where Self == CustomScrollTargetBehavior {static var custom: CustomScrollTargetBehavior { .init() }
}

如上代码所示,我们创建了一个定制的 CustomScrollTargetBehavior 滚动目标行为,在其中:

  • 当滚动内容向上滚动时,context.velocity.dy 为正值;
  • 当滚动内容向下滚动时,context.velocity.dy 为负值;
  • 滚动速度越快,context.velocity.dy 绝对值越大;

从 updateTarget 的代码逻辑不难看到:我们自定义创建的这种新滚动模式,它在滚动时的阻尼感特别强。

现在,可以非常方便轻松的在滚动视图中应用我们自己的滚动目标行为啦:

ScrollView(.vertical) {LazyVStack {ForEach(1...100, id: \.self) { i inText("Item \(i)").font(.largeTitle.weight(.heavy)).foregroundStyle(.white).frame(width: 300, height: 200).background {Capsule().foregroundStyle(.blue.gradient)}}}.scrollTargetLayout()
}
.scrollTargetBehavior(.custom)
.padding(.vertical, 20.0)

最后运行一下代码,看看新的滚动效果吧:

在这里插入图片描述

利用 SwiftUI 5.0(iOS 17.0)中新的滚动目标行为机制,我们可以逍遥物外的自由定制滚动视图的滚动对齐模式啦!棒棒哒!💯

总结

在本篇博文中,我们讨论了什么是 SwiftUI 5.0(iOS 17.0)中新增的滚动目标行为(Target Behavior),并且介绍了如何游刃有余应用它们,我们在最后还创建了定制的滚动目标行为让自由度更加“出谷迁乔”。

感谢观赏,再会啦!😎

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

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

相关文章

Linux----Mplayer音视频库的移植

想要播放视频音乐就得移植相关库到板子上 Mplayer移植需要依赖以下源文件&#xff1a;(从官网获取或者网上) 1、zlib-1.2.3.tar.gz &#xff1a;通用的内存空间的压缩库。 2、libpng-1.2.57.tar.gz :png格式图片的压缩或解压库 3、Jpegsrc.v9b.tar.gz : jpeg格式图片的压…

数据结构day3

一、思维导图 二、顺序表实现学生管理系统 //头文件 #ifndef TEST_H #define TEST_H #define MAX_SIZE 100//定义学生类型 typedef struct {char name[20]; //姓名int age; //年龄double score; //分数 }datatype;//定义班级类型 typedef struct {datatype student[MAX…

CDGA数据治理:突破卡点堵点,解决确权难、流通交易难问题

随着大数据时代的来临&#xff0c;数据已成为推动社会进步和经济发展的重要力量。然而&#xff0c;数据治理中的卡点堵点问题&#xff0c;特别是确权难、流通交易难&#xff0c;正成为制约数据要素市场健康发展的瓶颈。本文将探讨这些问题&#xff0c;并提出相应的解决方案。 确…

uniapp写登陆|微信小程序登录和微信h5登录使用同一个页面

文章目录 导文微信小程序登录先写一个样式代码实现详细解释&#xff1a; 微信h5登录先写一个样式代码实现1. checkWeChatCode()2. getWeChatCode()页面获取登陆后的code 导文 微信小程序登录怎么实现&#xff1f; 微信h5登录怎么实现&#xff1f; 用uniapp写同一个页面&#xf…

CloudCampus的三种部署模式

CloudCampus的三种部署模式 本地部署 客户购买控制器 自己运营 软件永久license sns &#xff0c;将软件补丁、软件升级&#xff08;含升级版本的新特性&#xff09;、远程支持等打包在一起组成SnS年费 msp自建云部署 msp 购买控制器 msp运营 …

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案)

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案) 一、介绍 早在2009年, 深度学习还只是一个新兴领域。只有少数人认为这是一个富有成效的研究领域。今天,它被用于开发应用程序,这些应用程序在一段时间前被认为是困难或不可能做到的。 语音识别、图像识别、在数…

《云原生安全攻防》-- 容器攻击案例:镜像投毒与Fork炸弹

在本节课程中&#xff0c;我们将介绍两个比较有意思的容器攻击案例&#xff0c;镜像投毒与Fork炸弹。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; 镜像投毒&#xff1a;构建恶意镜像&#xff0c;诱导用户拉取镜像创建容器。 Fork炸弹&#xff1a;Fork炸弹的攻击…

sql常见50道查询练习题

sql常见50道查询练习题 1. 表创建1.1 表创建1.2 数据插入 2. 简单查询例题(3题&#xff09;2.1 查询"李"姓老师的数量2.2 查询男生、女生人数2.3 查询名字中含有"风"字的学生信息 3. 日期相关例题(6题&#xff09;3.1 查询各学生的年龄3.2 查询本周过生日的…

redis的学习(二):常见数据结构及其方法

简介 redis常见的数据结构和他们的常用方法 redis的数据结构 redis是一个key-value的nosql&#xff0c;key一般是字符串&#xff0c;value有很多的类型。 j基本类型&#xff1a; stringhashlistsetsortedSet 特殊类型&#xff1a; GEOBitMapHyperLog key的结构 可以使用…

MacOS M1 安装item2 并配置Zsh

文章目录 1 下载item22 美化item22.1 配置主题2.2 设置黑色的主题&#xff1a;2.3 配置显示状态栏 status bar 3 安装 Oh my zsh3.1 设置主题3.2 设置插件3.3 安装第三方插件1 下载仓库解压2 使用 git clone 一些常用插件以及其作用 参考 1 下载item2 MacOS自带终端&#xff0…

ontap simulator配置过程

一、下载模拟器 参考《Simulate_ONTAP_9-14-1_Installation_and_Setup_Guide.pdf》P4的指导&#xff0c;登录网站进行下载。 二、传入pve&#xff0c;并解压转换 # 解压 tar -xvf vsim-netapp-DOT9.14.1-cm_nodar.ova# 解压后的文件列表&#xff0c;其中ovf文件里定义了虚拟机…

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换

WGS84经纬度坐标 GCJ02火星坐标 BD09百度坐标互相转换 背景&#xff1a;uniapp做的微信小程序&#xff0c;使用到了相机拍照并获取位置坐标信息&#xff1b;在腾讯地图上展示坐标点位置信息&#xff1b; 由于业务需要我们的PC端用的不是腾讯地图&#xff0c;需要使用WGS84坐标或…

《0基础》学习Python——第二十三讲__网络爬虫/<6>爬取哔哩哔哩视频

一、在B站上爬取一段视频&#xff08;B站视频有音频和视频两个部分&#xff09; 1、获取URL 注意&#xff1a;很多平台都有反爬取的机制&#xff0c;B站也不例外 首先按下F12找到第一条复制URL 2、UA伪装&#xff0c;下列图片中&#xff08;注意代码书写格式&#xff09; 3、Co…

ViT(Vision Transformer)网络结构详解

本文在transformer的基础上对ViT进行讲解&#xff0c;transformer相关部分可以看我另一篇博客&#xff08;transformer中对于QKV的个人理解-CSDN博客&#xff09;。 一、网络结构概览 上图展示了Vision Transformer (ViT) 的基本架构&#xff0c;我按照运行顺序分为三个板块进…

Rancher

文章目录 Rancher1. 安装和配置2. 服务部署和管理3. 容器自动化缩容和扩容 Rancher Rancher 是一个开源的企业级容器管理平台&#xff0c;旨在简化容器化应用的部署、管理和运维。它支持多种容器编排引擎&#xff0c;如 Kubernetes、Docker Swarm 等&#xff0c;并提供了统一的…

自动驾驶系统开发与调试:车路云一体化无人驾驶挑战赛参赛体验

点击蓝字 关注我们 在过去的几年里&#xff0c;自动驾驶技术在全球范围内吸引了大量关注。其潜力不仅在于提升行车安全&#xff0c;而且还可以改变我们的出行方式和城市规划&#xff0c;提高交通运输效率。国际汽车工程师学会&#xff08;SAE&#xff09;根据不同自动驾驶程度&…

JAVA在线文档

1.存在码 JDK21中文API 2.全栈行动派 JDK17中文API 3.mklab.cn JDK11中文API JDK8中文API JDK7-21英文API 4.docs.oracle.com JDK7-22英文文档

项目笔记| 基于Arduino和IR2101的无刷直流电机控制器

本文介绍如何使用 Arduino UNO 板构建无传感器无刷直流 &#xff08;BLDC&#xff09; 电机控制器或简单的 ESC&#xff08;电子速度控制器&#xff09;。 无刷直流电机有两种类型&#xff1a;有传感器和无传感器。有感无刷直流电机内置3个霍尔效应传感器&#xff0c;这些传感…

MLIR的TOY教程学习笔记

MLIR TOY Language 文章目录 MLIR TOY Language如何编译该项目ch1: MLIR 前端IR解析ch2: 定义方言和算子 (ODS)1. 定义方言2. 定义OP3. OP相关操作4. 定义OP ODS (Operation Definition Specification)1. 基本定义2. 添加文档3. 验证OP4. 新增构造函数5. 定义打印OP的格式 ch3:…

【机器学习】超参数选择:解锁机器学习模型潜力的关键

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 超参数选择&#xff1a;解锁机器学习模型潜力的关键引言什么是超参数&#xff1…