SwiftUI 6.0(iOS 18)监听滚动视图视口中子视图可见性的极简方法

在这里插入图片描述

概览

在 SwiftUI 的应用开发中,我们有时需要监听滚动视图中子视图当前的显示状态:它们现在是被滚动到可见视口(Viewport)?或仍然是隐藏在“未知的黑暗”中呢?

在这里插入图片描述

在 SwiftUI 早期版本中为了得偿所愿,我们需要借助一些“取巧”的手段。不过,从 SwiftUI 6.0(iOS 18)开始情况有了改观,我们有了针对性的解决方案。

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

  • 概览
  • 1. 监听滚动目标可见性的改变
  • 2. 监听任意视图滚动可见性的改变
  • 3. 更改滚动可见性阙值
  • 总结

相信学完本课后,小伙伴们对于 SwiftUI 滚动视图视口可见性的监听一定会有更加浑然天成的解决之道。

那还等什么呢?让我们马上开始滚动大冒险吧!

Let‘s go!!!😉


1. 监听滚动目标可见性的改变

在以滚动目标(Scroll Target)为驱动导向的滚动视图中,我们有多种方法来监听视口中子视图可见性的“白云苍狗”。


想要了解更多 SwiftUI 滚动目标行为的知识,请小伙伴们移步如下链接观赏精彩的内容:

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

不过,从 SwiftUI 6.0(iOS 18)开始一切都变的更加信手拈来了。在 WWDC 24 中苹果新增了 onScrollTargetVisibilityChange 修改器方法来专注于解决此事:

在这里插入图片描述

使用该修改器,我们可以监听滚动视图视口所有子视图可见性的实时变化情况:

struct ItemsView: View {@State private var visible: [Int] = []var body: some View {ScrollView {LazyVStack(alignment: .leading) {ForEach(1..<100, id: \.self) { item inText("Item \(item)").font(.largeTitle).frame(maxWidth: .infinity).padding().background {Rectangle().foregroundStyle(.blue.gradient)}.

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

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

相关文章

Unity动画模块 之 3D模型导入基础设置 Materials

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 还是那句话&#xff0c;用到的时候再看看&#xff0c;死记硬背不是正经的学习方法&#xff0c;但是又不得不知道一下&…

环网交换机 环网数采仪 环网采集器确保数据传输无懈可击!

计讯物联Pro级双向防护&#xff0c;升级环网采集器确保数据传输无懈可击&#xff01; 在物联网(IoT)的世界里&#xff0c;数据流动如同城市交通&#xff0c;需要高效且可靠的网络来支撑。但就像城市交通可能遇到意外拥堵或道路封闭&#xff0c;传统网络在数据传输上也会遇到障…

Nginx--日志

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Nginx日志介绍 nginx 有一个非常灵活的日志记录模式&#xff0c;每个级别的配置可以有各自独立的访问日志, 所需日志模块 ngx_http_log_module 的…

无人机视角下的EasyCVR视频汇聚管理:构建全方位、智能化的AI视频监控网络

随着5G、AI、物联网&#xff08;IoT&#xff09;等技术的快速发展&#xff0c;万物互联的时代已经到来&#xff0c;视频技术作为信息传输和交互的重要手段&#xff0c;在多个领域展现出了巨大的应用潜力和价值。其中&#xff0c;EasyCVR视频汇聚平台与无人机结合的AI应用更是为…

javaweb_10:XML映射文件

一、规范 1、XML映射文件的名称与Mapper接口名称一致&#xff0c;并且将XML映射文件和Mapper接口放在相同的包下&#xff08;同包同名&#xff09;。 2、XML映射文件的namesapce属性为Mapper接口全限定名一致。 3、 XML映射文件中sql语句的id与Mapper接口中的方法名一致&a…

低代码平台工具 —— 公式编辑器

导读 公式编辑器&#xff1a;公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成 公式编辑器主要需要解决三件事&#xff1a; 合适的编辑器强大的函数库合适的事件监听 技术选型 excel函数库 formulajs&#xff0c;这个函数库可以让JavaScript支…

C++:string类篇

string类的介绍 概念&#xff1a; std::string是C 标准库中用于处理字符串的类&#xff0c;它封装了对字符序列的操作&#xff0c;使得字符串处理更加便捷和安全。 特点&#xff1a; 1.动态内存管理&#xff1a;std::string会自动分配和释放内存&#xff0c;避免了手动管理内存…

Leetcode 283 移动零

引言 今天&#xff0c;看到了一个双指针算法&#xff0c;构思非常巧妙。这里特来记录一下。 正文 本题&#xff0c;我们使用两个指针&#xff0c;一左一右&#xff0c;右侧指针不断向右侧移动&#xff0c;如果右侧指针所指向的数据值不为 0&#xff0c;那么我们就交换右侧指针…

jmeter引入jar包的三种方式

示例 实现对登录密码进行MD5加密 pom文件依赖 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.12&l…

90. UE5 RPG 实现技能的装配

在上一篇里&#xff0c;我们实现了在技能面板&#xff0c;点击技能能够显示出技能的相关描述以及下一级的技能的对应描述。 在这一篇里&#xff0c;我们实现一下技能的装配。 在之前&#xff0c;我们实现了点击按钮时&#xff0c;在技能面板控制器里存储了当前选中的技能的相关…

阿里云搜索专家实操:如何高效构建企业级 AI 搜索?

作者&#xff1a;来自阿里云搜索产品专家牛俊 本文由阿里云搜索产品专家牛俊在【AI 搜索 TechDay】上的分享【阿里云 AI 搜索 Demo 展示和动手实践】整理而成。 阿里云 AI 搜索的产品能力与业务价值 阿里云 AI 搜索的方案&#xff0c;基于阿里云 Elasticsearch Inference API…

Java巅峰之路---进阶篇---面向对象(一)

static关键字 介绍 static表示静态&#xff0c;是java中的一个修饰符&#xff0c;可以修饰成员方法&#xff0c;成员变量。 其中&#xff0c;被static修饰的成员变量&#xff0c;叫做静态变量&#xff1b;被static修饰的成员方法&#xff0c;叫做静态方法。 静态变量 调用…

牛客面经学习笔记(四)

这种拨码开关在PLC里面很是常用&#xff1a; 这种弧型线就很漂亮&#xff1a; 这个白色按键很漂亮&#xff1a; 快恢复保险丝&#xff1a; 继电器电路&#xff1a; 这里的续流二极管很重要&#xff0c;因为继电器是感性元件&#xff1a; 【【必考】5招搞清楚&#xff01;单点接…

【轻松拿捏】Java中ArrayList 和 LinkedList 的区别是什么?

ArrayList 和 LinkedList 的区别是什么&#xff1f; 1. ArrayList 2. LinkedList 3.总结 &#x1f388;边走、边悟&#x1f388;迟早会好 ArrayList 和 LinkedList 都是 Java 中常用的 List 接口的实现类&#xff0c;但它们在内部结构和操作性能上有所不同。 1. ArrayLis…

SpringBoot+Vue实现大文件上传(分片上传)

SpringBootVue实现大文件上传&#xff08;分片上传&#xff09; 1 环境 SpringBoot 3.2.1&#xff0c;Vue 2&#xff0c;ElementUI 2 问题 前几篇文章&#xff0c;可以用于较小文件的上传&#xff0c;对于较大文件来说&#xff0c;为了提高上传效率和可靠性&#xff0c;可以采…

【1-4】设计模式概述

目录 一.设计模式产生背景 二.软件设计模式的概念 三.学习设计模式的必要性 四.设计模式分类 一.设计模式产生背景 二.软件设计模式的概念 软件设计模式&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多人知晓的、经过分类编目的、代码设计经验的总结。它描述了…

Python爬虫使用实例

IDE&#xff1a;大部分是在PyCharm上面写的 解释器装的多 → 环境错乱 → error&#xff1a;没有配置&#xff0c;no model 爬虫可以做什么&#xff1f; 下载数据【文本/二进制数据&#xff08;视频、音频、图片&#xff09;】、自动化脚本【自动抢票、答题、采数据、评论、点…

深度学习入门:卷积神经网络 | CNN概述,图像基础知识,卷积层,池化层(超详解!!!)

目录 &#x1f354; 前言 &#x1f354; 图像基础知识 1. 像素和通道的理解 2. 小节 &#x1f354; 卷积层 1. 卷积计算 2. Padding 3. Stride 4. 多通道卷积计算 5. 多卷积核卷积计算 6. 特征图大小 7. PyTorch 卷积层 API 7. 小节 &#x1f354; 池化层 1. 池…

代码随想录算法训练营第十六天(二叉树 四)

力扣题部分: 513.找树左下角的值 题目链接:. - 力扣&#xff08;LeetCode&#xff09; 题面: 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 思路(层序遍历): 应该是这道题最简单的方法了&#xff0…

C++ 设计模式——建造者模式

建造者模式 建造者模式组成部分建造者模式使用步骤1. 定义产品类2. 创建具体产品类3. 创建建造者接口4. 实现具体建造者5. 创建指挥者类6. 客户端代码 建造者模式 UML 图建造者模式 UML 图解析建造者模式的优缺点建造者模式的适用场景完整代码 建造者模式 建造者模式&#xff…