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.rhkb.cn/news/381416.html

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

相关文章

Linux TFTP服务搭建及使用

1、TFTP 服务器介绍 TFTP &#xff08; Trivial File Transfer Protocol &#xff09;即简单文件传输协议是 TCP/IP 协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。端口号为 69 2、TFTP 文件传输的特点 tftp…

Redis--12--1--分布式锁---java

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Redis与分布式锁Jedis实现1.RedisConfig2.RedisDistLock3.应用4.加上看门狗逻辑 RedisDistLockWithDog redisson实现1.依赖2.代码 Redis与分布式锁 Jedis实现 1.Re…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(六)-无人机直接C2通信

目录 引言 5.4 直接C2通信 5.4.1 概述 5.4.2 A2X直接C2通信服务的授权策略 5.4.3 USS使用A2X直接C2通信服务的C2授权程序 5.4.4 直接C2通信建立程序 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别…

钡铼分布式I/O系统边缘计算Modbus,MQTT,OPC UA耦合器BL206

BL206系列耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;支持Modbus&#xff0c;MQTT&#xff0c;OPC UA协议&#xff0c;可以快速接入现场PLC、DCS、PAS、MES、Ignition和SCADA以及ERP系统&#xff0c;同时…

八股文之java基础

jdk9中对字符串进行了一个什么优化&#xff1f; jdk9之前 字符串的拼接通常都是使用进行拼接 但是的实现我们是基于stringbuilder进行的 这个过程通常比较低效 包含了创建stringbuilder对象 通过append方法去将stringbuilder对象进行拼接 最后使用tostring方法去转换成最终的…

Pycharm 安装与使用

PyCharm的安装与使用 一、什么是PyCharm PyCharm是由JetBrains开发的专业Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供智能代码补全、语法高亮和代码导航等编辑功能。它具有强大的调试工具和内置版本控制系统支持&#xff0c;方便代码管理和协作。PyCharm…

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署Hallo :针对肖像图像动画的分层音频驱动视觉合成

目录 背景介绍 训练与推理 训练 推理 开始部署 1. 把项目源码下载到本地 2. 创建 conda 环境 3. 使用 pip 安装软件包 4. 下载预训练模型 5. 准备推理数据 6. 运行推理 关于训练 为训练准备数据 训练 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞…

高职院校人工智能人才培养成果导向系统构建、实施要点与评量方法

一、引言 近年来&#xff0c;人工智能技术在全球范围内迅速发展&#xff0c;对各行各业产生了深远的影响。高职院校作为培养高技能人才的重要基地&#xff0c;肩负着培养人工智能领域专业人才的重任。为了适应社会对人工智能人才的需求&#xff0c;高职院校需要构建一套科学、…

独立游戏《星尘异变》UE5 C++程序开发日志5——实现物流系统

目录 一、进出口清单 二、路径计算 三、包裹 1.包裹的数据结构 2.包裹在场景中的运动 四、道路 1.道路的数据结构 2.道路的建造 3.道路的销毁 4.某个有道路连接的建筑被删除 作为一个工厂类模拟经营游戏&#xff0c;各个工厂之间的运输必不可少&#xff0c;本游戏采用的…

Cisco 路由重发布 —— 实现路由信息在不同路由域间的传递

一、技术背景 在实际的组网中&#xff0c;可能会遇到这样一个场景&#xff1a;在一个网络中同时存在两种或者两种以上的路由协议。例如客户的网络原先是纯 Cisco 的设备&#xff0c;使用 EIGRP 协议将网络的路由打通。但是后来网络扩容&#xff0c;增加了一批华为的设备&#…

主流大数据调度工具DolphinScheduler之数据采集

今天继续给大家分享主流大数据调度工具DolphinScheduler&#xff0c;以及数据的ETL流程。 一&#xff1a;调度工具DS 主流大数据调度工具DolphinScheduler&#xff0c; 其定位&#xff1a;解决数据处理流程中错综复杂的依赖关系 任务支持类型&#xff1a;支持传统的shell任…

人工智能增强的心电图推导的身体质量指数作为未来心脏代谢疾病预测指标| 文献-基于人工智能(AI base)医学影像研究与疾病诊断

Title 题目 Artificial intelligence-enhancedelectrocardiography derived body massindex as a predictor of futurecardiometabolic disease 人工智能增强的心电图推导的身体质量指数作为未来心脏代谢疾病预测指标 01 文献速递介绍 心电图&#xff08;ECG&#xff09;可…

ubuntu系统vscode调试c/c++大中型项目

文章目录 1. 插件2. 项目工程3. vsode的配置setting.jsonc_cpp_properties.json 4. 启动调试 前置阅读 vscode调试第一篇 1. 插件 c/c, cmake, cmake tools 2. 项目工程 对于我的项目需要用到很多的三方库&#xff0c;三方库的版本又会有很多&#xff0c;一般都是用cmake编译…

项目笔记| 基于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:…

降雨量预测 | Matlab基于ARIMA-RBF降雨量预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 降雨量预测 | Matlab基于ARIMA-RBF降雨量预测 注&#xff1a;程序和数据放在一个文件夹。 程序语言为matlab&#xff0c;程序可出预测效果图&#xff0c;指标图; 代码特点&#xff1a;参数化编程、参数可方便更改、代…

浅聊 Three.js 屏幕空间反射SSR-SSRShader

浅聊 Three.js 屏幕空间反射SSR(2)-SSRShader 前置基础 渲染管线中的相机和屏幕示意图 -Z (相机朝向的方向)||| -------------- <- 屏幕/投影平面| | || | || | (f) | <- 焦距| | ||…

前端vue框架的项目文件创建及常见Vue指令运用

前言 本文介绍前端Vue框架&#xff0c;先从npm工具创建的Vue项目开始&#xff0c;对项目结构的一些文件用途进行说明&#xff0c;随后对Vue文件编写所用的两种风格&#xff08;选项式API和组合式API风格&#xff09;做了区分&#xff0c;同时对编写代码中常见的生命周期钩子函…

Pytorch使用前期准备

一、检查英伟达驱动和CUDA Toolkit是否正确安装 1.任务管理器性能选项卡中能正确显示显卡型号则表示显卡驱动正确安装 2. CUDA Toolkit会跟随pytorch自动安装 二、虚拟环境的准备 Miniconda — Anaconda documentationhttps://docs.anaconda.com/miniconda/ 1.安装anaconda或者…

腾讯元宝上线“3D角色梦工厂”:快速生成专属3D角色!

7月16日&#xff0c;腾讯旗下大模型应用“腾讯元宝”上线“3D角色梦工厂”&#xff0c;允许用户通过上传一张五官清晰的正面头像&#xff0c;并选择不同的角色模板&#xff0c;迅速生成个人3D角色&#xff01; 技术特点 “3D角色梦工厂”将大模型生成技术与3D应用相结合&#…