SwiftUI 中掌握 ScrollView 的使用:滚动可见性
文章目录
- 前言
- 视图修饰符
- 应用场景
- 可见性
- 完整示例
- ContentView
- VideoPlayerView
- ScrollViewVisibilityApp
- 总结
前言
我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查并监控 ScrollView 内视图的可见性状态。本周,我们将学习如何使用新的 onScrollTargetVisibilityChange
和 onScrollVisibilityChange
视图修饰符。
视图修饰符
让我们先从 onScrollTargetVisibilityChange
视图修饰符开始。它设计得易于使用,允许你将其附加到具有滚动目标布局的任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符的使用。
struct ContentView: View {@State private var visible: [Int] = []var body: some View {ScrollView {LazyVStack {ForEach(1..<100, id: \.self) { item inText(verbatim: item.formatted())}}.scrollTargetLayout()}.onScrollTargetVisibilityChange(idType: Int.self) { identifiers invisible = identifiers}.onChange(of: visible) {print(visible)}}
}
如上例所示,我们在懒加载栈(LazyVStack)上使用 scrollTargetLayout
视图修饰符,以便允许 ScrollView 针对栈的子视图进行目标识别,而不是针对栈本身。
要了解有关 scrollTargetLayout
视图修饰符的更多信息,请查看我的文章《掌握 SwiftUI 中的 ScrollView:滚动几何》。
应用场景
我们还将 onScrollTargetVisibilityChange
视图修饰符附加到 ScrollView 上,提供标识符类型和操作闭包。在操作闭包内,我们获取可见标识符列表,并可以对可见项执行所需的操作。
有时,视图需要在其可见性状态在 ScrollView 中发生变化时进行响应。对于这些情况,SwiftUI 框架引入了 onScrollVisibilityChange
视图修饰符,你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。
struct VideoPlayerView: View {let url: URL@State var player: AVPlayer?var body: some View {VideoPlayer(player: player).task {if player == nil {player = AVPlayer(url: url)}}.onScrollVisibilityChange { isVisible inif isVisible {player?.play()} else {player?.pause()}}}
}
上例定义了 VideoPlayerView
视图,该视图在其可见时自动播放视频内容。正如你所见,我们将 onScrollVisibilityChange
视图修饰符附加到视图本身,并提供一个操作闭包。我们在操作闭包内获得可见性参数,并可以对其变化进行响应。
可见性
onScrollVisibilityChange
和 onScrollTargetVisibilityChange
修饰符都具有 threshold
参数。threshold
参数允许我们调整需要可见的视口部分的数量,以触发操作闭包。默认情况下,SwiftUI 框架使用 0.5 作为阈值,这意味着至少 50% 的视图需要可见,SwiftUI 才会运行操作。但你可以轻松调整此值。
struct VideoPlayerView: View {let url: URL@State var player: AVPlayer?var body: some View {VideoPlayer(player: player).task {if player == nil {player = AVPlayer(url: url)}}.onScrollVisibilityChange(threshold: 0.1) { isVisible inif isVisible {player?.play()} else {player?.pause()}}}
}
在上述示例中,我们定义了阈值,这意味着 SwiftUI 将在视图至少有 10% 可见时运行操作闭包。同样,当视图从可见状态转换为不可见状态,即显示的视口部分少于 10% 时,也会运行该闭包。
完整示例
上面对视图修饰符有了初步了解,它的设计得易于使用,允许你将其附加到具有滚动目标布局的任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符的使用。
示例代码如下:
import SwiftUI
import AVKitstruct ContentView: View {@State private var visible: [Int] = []var body: some View {ScrollView {LazyVStack {ForEach(1..<100, id: \.self) { item inText(verbatim: item.formatted()).frame(width: 100, height: 100).background(item % 2 == 0 ? Color.blue : Color.red).cornerRadius(10).padding(5)}}.scrollTargetLayout()}.onScrollTargetVisibilityChange(idType: Int.self) { identifiers invisible = identifiers}.onChange(of: visible) { newVisible inprint("Visible items: \(newVisible)")}.navigationTitle("ScrollView Demo")}
}struct VideoPlayerView: View {let url: URL@State var player: AVPlayer?var body: some View {VideoPlayer(player: player).frame(height: 200).task {if player == nil {player = AVPlayer(url: url)}}.onScrollVisibilityChange { isVisible inif isVisible {player?.play()} else {player?.pause()}}}
}@main
struct ScrollViewVisibilityApp: App {var body: some Scene {WindowGroup {NavigationView {VStack {ContentView()Spacer()VideoPlayerView(url: URL(string: "https://www.example.com/video.mp4")!).padding()}}}}
}
这个示例 Demo 展示了如何使用 onScrollTargetVisibilityChange
和 onScrollVisibilityChange
视图修饰符来跟踪 ScrollView 中的视图可见性。整个示例分为两个部分:一个是显示带有多个文本视图的 ScrollView,另一个是显示一个视频播放器视图。
ContentView
- ScrollView 和 LazyVStack:使用
ScrollView
包裹一个LazyVStack
,在其中放置 1 到 99 的数字。每个数字都显示在一个Text
视图中,并有不同的背景颜色。 - scrollTargetLayout:在
LazyVStack
上应用scrollTargetLayout
视图修饰符,以允许 ScrollView 针对栈的子视图进行目标识别。 - onScrollTargetVisibilityChange:在 ScrollView 上应用
onScrollTargetVisibilityChange
视图修饰符,并提供标识符类型和操作闭包。在操作闭包内,获取可见标识符列表并赋值给visible
状态变量。 - onChange:监听
visible
状态变量的变化,并打印当前可见的项。
VideoPlayerView
- VideoPlayer:定义一个视频播放器视图,使用
AVPlayer
播放视频。 - task:在
task
修饰符中初始化播放器。 - onScrollVisibilityChange:在视频播放器视图上应用
onScrollVisibilityChange
视图修饰符,并提供一个操作闭包。在操作闭包内,根据可见性状态来播放或暂停视频。
ScrollViewVisibilityApp
- 主应用入口:定义主应用入口
ScrollViewVisibilityApp
,将ContentView
和VideoPlayerView
组合到一个垂直堆栈中,并通过NavigationView
进行导航。
运行这个 Demo,你会看到一个带有多个文本视图的 ScrollView,当你滚动时,控制台会打印当前可见的项。此外,在页面底部有一个视频播放器,当视频播放器出现在视口内时,它会自动播放,当其离开视口时,会自动暂停。
总结
今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,并监控可见标识符列表。示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。
相关文章:
SwiftUI 中掌握 ScrollView 的使用:滚动可见性
文章目录 前言视图修饰符应用场景可见性完整示例ContentViewVideoPlayerViewScrollViewVisibilityApp 总结 前言 我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查并监控 ScrollView 内视图…...
中药养发护发
按照中医理论,头发和肝肾有密切联系,肝主血,肾藏精, 其华在发,肝肾强健,上荣于头,则毛发乌黑浓密. 中药育发的应用 以当归,天麻,桑疹子养血润发,配合干姜祛风活血,能通畅经络, 加快循环,激活毛囊,能促进皮肤组织营养成分吸收和废弃物的排泄,改善 头发生态. 用苦参 皂角 清热化…...
Java面试题-集合类
目录 1、请简单介绍下 Java 的集合类吧。 Collection Set TreeSet和HashSet List ArrayList 和 LinkedList 数组和链表的区别 Java 的列表有哪些实现类? Vector Queue Map 能说下 HashMap 的实现原理吗? 能说下 HashMap 的扩容机制吗&#x…...
【Vue3】组件通信之v-model
【Vue3】组件通信之v-model 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的…...
【Golang 面试 - 进阶题】每日 3 题(二)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…...
Java中等题-多数元素2(力扣)【摩尔投票升级版】
给定一个大小为 n 的整数数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素。 示例 1: 输入:nums [3,2,3] 输出:[3] 示例 2: 输入:nums [1] 输出:[1]示例 3: 输入:num…...
100条超牛的DOS命令
目录 1. 文件和目录管理 1.1 列出文件和目录 1.1.1 dir 1.1.2 dir /w 1.2 切换目录 1.2.1 cd 1.2.2 cd .. 1.3 创建和删除目录 1.3.1 md / mkdir 1.3.2 rd / rmdir 1.4 文件操作 1.4.1 del / erase 1.4.2 copy 1.5 文件重命名 1.5.1 ren / rename 1.5.2 move …...
大数据信用报告查询会不会留下查询记录?怎么选择查询平台?
最近有不少网友都在咨询一个问题,那就是大数据信用报告查询会不会留下查询记录,会不会对自己的征信产生影响,下面本文就详细为大家介绍一下,希望对你了解大数据信用有帮助。 首先、大数据信用与人行征信是独立的 很多人只知道人行…...
JS【详解】内存泄漏(含泄漏场景、避免方案、检测方法),垃圾回收 GC (含引用计数、标记清除、标记整理、分代式垃圾回收)
内存泄漏 在执行一个长期运行的应用程序时,应用程序分配的内存没有被释放,导致可用内存逐渐减少,最终可能导致浏览器崩溃或者应用性能严重下降的情况,即 JS 内存泄漏 可能导致内存泄漏的场景 不断创建全局变量未及时清理的闭包&…...
第三期书生大模型实战营之Llamaindex RAG实践
基础任务 任务要求:基于 LlamaIndex 构建自己的 RAG 知识库,寻找一个问题 A 在使用 LlamaIndex 之前InternLM2-Chat-1.8B模型不会回答,借助 LlamaIndex 后 InternLM2-Chat-1.8B 模型具备回答 A 的能力,截图保存。 streamlit界面…...
【从0到1进阶Redis】Jedis 理解事务
笔记内容来自B站博主《遇见狂神说》:Redis视频链接 小伙伴们可以熟悉一下本专栏的 Redis 文章,可以更好地理解 正常操作 package oldfe.study;import com.alibaba.fastjson.JSONObject; import redis.clients.jedis.Jedis; import redis.clients.jedis.T…...
MySQL之Lost connection to MySQL server during query复现测试
测试Lost connection to MySQL server during query复现条件 环境报错信息复现测试方式一方式二 环境 Python: 3.8/3.9 Mysql: 5.x 报错信息 File "/Users/xxx/lib/python3.9/site-packages/sqlalchemy/dialects/mysql/base.py", line 2509, in do_rollbackdbapi_con…...
中国AI大模型场景探索及产业应用调研报告
AI大模型发展态势 定义 AI大模型是指在机器学习和深度学习领域中,采用大规模参数(至少在一亿个以上)的神经网络模型,AI大模型在训练过程中需要使用大量的算力和高质量的数据资源。 产业规模 2023年,中国大模型市场规模为147亿。结合《202…...
Linux--shell脚本语言—/—<1>
一、shell简介 Shell是一种程序设计语言。作为命令语言,它交互式解释和执行用户输入的命令或者自动地解释和执行预先设定好的一连串的命令;作为程序设计语言,它定义了各种变量和参数,并提供了许多在高级语言中才具有的控制结构&am…...
【java框架开发技术点】通过反射机制调用类中的私有或受保护的方法
示例 假设我们有一个类 ExampleClass,其中有一个私有方法 privateMethod: public class ExampleClass {private void privateMethod(String message) {System.out.println("Private method called with message: " + message);} }我们可以使用上述代码来调用这个…...
你知道这些鼎鼎大名的Java底层核心公司吗
在讨论Java虚拟机——JVM的时候,有几个知名的,不得不提到的JVM的产品和公司。 一、Oracle HotSpot:这是由Sun公司开发的虚拟机。它由最初的Classic VM开始,到推出崭露头角的Exact VM的虚拟机,是现代化高性能虚拟机的最…...
C++入门级文章
一、一个用于查询C标准库内函数、操作符等的链接 https://legacy.cplusplus.com/reference/ 声明:该文档并非官方文档,但其具有易于查询和使用的优势,足够日常使用。 二、C的第一个程序 1、C语言中的语法在C中仍旧适用,首先我们来…...
modelsim仿真quartus IP
开发环境:quartus prime pro 20;modelsim se-64 10.6d 1. 生成Altera的IP库 使用quartus生成IP库,需要使用Simulation Library Compiler(Tools->Launch Simulation Library Compiler) 如下图操作,选择…...
PCB设计经验——布线原则
1.连线精简——避免直角布线 导线也应看作一种元器件,有自己的电阻,电感,电容 PCB走线在直角转弯的地方,信号前后部分相互影响,导致分布电容增加,对信号上升沿和下降沿有延缓影响。从阻抗的角度来说&#…...
C++进阶:设计模式___适配器模式
前言 在C的基础语法的学习后,更进一步为应用场景多写代码.其中设计模式是有较大应用空间. 引入 原本在写容器中适配器类有关的帖子,发现适配模式需要先了解,于是试着先写篇和适配器模式相关的帖子 理解什么是适配器类,需要知道什么是适配器模式.适配器模式是设计模式的一种.笔…...
“八股文“在现代编程面试中的角色重塑:助力、阻力还是桥梁?
🌈所属专栏:【其它】✨作者主页: Mr.Zwq✔️个人简介:一个正在努力学技术的Python领域创作者,擅长爬虫,逆向,全栈方向,专注基础和实战分享,欢迎咨询! 您的点…...
Android 安装应用-浏览阶段
应用安装的浏览阶段主要是由PackageManagerService类中的scanPackageNewLI()实现的,看一下它的代码: // TODO: scanPackageNewLI() and scanPackageOnly() should be merged. But, first, commiting// the results / removing app data needs to be move…...
JavaEE 初阶(10)——多线程8之“单例模式”
目录 一. 设计模式 二. 单例模式 2.1 饿汉模式 2.2 懒汉模式 a. 加锁synchronized b. 双重if判定 c. volatile关键字(双重检查锁定) 一. 设计模式 设计模式是在软件工程中解决常见问题的经典解决方案。针对一些特定场景给出的一些比较好的解决…...
Javascript常见设计模式
JS设计模式学习【待吸收】-CSDN博客 JavaScript 中的设计模式是用来解决常见问题的最佳实践方案。这些模式有助于创建可重用、易于理解和维护的代码。下面列出了一些常见的 JavaScript 设计模式及其代码示例。 1. 单例模式(Singleton) 单例模式确保一…...
JavaFX布局-SplitPane
JavaFX布局-SplitPane 常用属性orientationpaddingdividerPositionsdisable 实现方式Java实现fxml实现 一个拆分至少两个区域的容器支持水平、垂直布局可以拖动区域的大小初始化大小通过比例设置[0,1] 常用属性 orientation 排列方式,Orientation.VERTICAL、Orien…...
2.MySQL库的操作
创建数据库 创建数据库的代码: CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [,create_specification] ...];create_specification:[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_name 说明: 大写的表示关键…...
如何学习计算机
不要只盯着计算机语言学习,你现在已经学习了C语言和Java,暑假又规划学习Python,最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言,沿着这个方向继续往后学习知识就行。计算机语言是学不完的,而未来就…...
Spring MVC 快速入门指南及实战演示
1、SpringMVC简介 1.1 背景 Servlet属于web层开发技术,技术特点: 1. 每个请求都需要创建一个Servlet进行处理 2. 创建Servlet存在重复操作 3. 代码灵活性低,开发效率低 是否有技术方案可以解决以上问题? 1.2 SpringMVC概述 Sp…...
在线测评系统(未完结)
文章目录 注意!!!1、多模块开发(后端)(1).Maven依赖(2)swagger配置 2、判题机开发(1)docker 前言:大二刚开始接手了本学院的oj,并管理了一段时间,后来老师给我…...
Python 爬虫项目实战(一):破解网易云 VIP 免费下载付费歌曲
前言 网络爬虫(Web Crawler),也称为网页蜘蛛(Web Spider)或网页机器人(Web Bot),是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓…...
新的网站平台如何做地推/免费浏览网站推广
MTK Touch 驱动的组成Mtk Touch driver 驱动包括:Mtkplatform 虚拟平台设备驱动、Module touch IC驱动、Inputsubsystem。Mtk platform 设备驱动是mtk为了兼容多个touchIC驱动而设计出来的虚拟驱动,它会去遍历每一个touch IC驱动,直到其中一个…...
公益事业单位网站建设方案/线上营销策略
有谁对lucene2.0与2.3做出过些比较么?在做一个搜索的项目,本来打算用的是2.0。看到现在的最新版本是2.3的了,在网上查了下2.3的一些优点大概就以下几点:1、Improved Index Management(索引管理的改进),在以前版本的索引…...
网站栏目建设图/百度营销网页版
iTOP-i.MX8MM开发板使用手册更新啦,最新版本为1.3版本。后续资料会不断更新,不断完善,帮助用户快速入门,大大提升研发速度。 关注“迅为电子”获取更多干货!本次更新重点: 1 iTOP-iMX8MM开发板支持UVC摄像头和MIPI OV5…...
做新闻网站开发和测试的硬件/网站seo排名优化方法
2018年国内知名咨询集团艾瑞咨询发布了《2018大学生消费洞察报告》,根据报告显示,中国高校大学生年在校人数已达到3000多万人,年度消费超过3800亿元,每个学生平均消费接近1.3万元。国内大学单校区的在校学生人数普遍在3000-20000人…...
检测网站打开速度/外汇交易平台
红色箭头所指是我引用的外部jar文件,在项目中创建一个文件夹放入jar文件。 点击file 找到jar文件的位置,选中确定 完成...
石家庄网站建设推广/制作网站需要多少费用
算法介于计算机和数学之间,它既需要很好的编程功底,同时需要数学的逻辑思维很多人开始学习算法时都是一头雾水,要不随便找个题库胡乱一通刷题,要不三天听听这个网课两天又去听听那个mooc,那么如何高效学习算法…...