首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SwiftUI在使用Swift结构和id时让ScrollViewReader滚动

SwiftUI是一种用于构建用户界面的现代化框架,它使用Swift语言进行开发。ScrollViewReader是SwiftUI中的一个视图容器,用于在滚动视图中定位和滚动到特定的视图位置。

在SwiftUI中,使用Swift结构和id来让ScrollViewReader滚动非常简单。首先,我们需要创建一个ScrollView,并在其中放置我们想要滚动的内容。然后,我们可以使用ScrollViewReader来包裹我们的内容,并使用id标识我们想要滚动到的特定视图。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var scrollToViewID: Int? = nil
    
    var body: some View {
        VStack {
            Button("Scroll to View 3") {
                scrollToViewID = 3
            }
            
            ScrollViewReader { scrollViewProxy in
                ScrollView {
                    VStack(spacing: 20) {
                        ForEach(1...10, id: \.self) { i in
                            Text("View \(i)")
                                .frame(width: 200, height: 200)
                                .background(Color.gray)
                                .id(i)
                        }
                    }
                    .onChange(of: scrollToViewID) { id in
                        withAnimation {
                            scrollViewProxy.scrollTo(id, anchor: .top)
                        }
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的示例中,我们创建了一个包含10个视图的垂直堆栈。当点击按钮时,我们将scrollToViewID设置为3,然后使用onChange监听scrollToViewID的变化。一旦scrollToViewID发生变化,我们就使用scrollViewProxy.scrollTo方法来滚动到id为3的视图位置。

这是一个简单的示例,你可以根据自己的需求进行扩展和定制。在实际应用中,你可以根据具体的业务场景来使用ScrollViewReader和SwiftUI的其他功能来实现更复杂的滚动效果。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WWDC 23 ,SwiftUI 5 SwiftData 的初印象

全新的数据流声明注入方式 利用 Swift 5.9 的新特性,对于引用类型的 Source of truth,只需使用 @Observable 进行标注,视图将对数据源的变化以属性为粒度进行响应。...这从根本上解决了当前影响 SwiftUI 应用( 过渡计算 )的效率问题。让开发者可以更加自由的来设计数据结构以及随心所欲的注入数据源。 不过很遗憾,这项新特性只能在 SwiftUI 5 上实现。...大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 显式的 id 声明)、一次性的定位系统( 视图进入后...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...一开始看到这些信息,我内心无比兴奋,但很快就平静下来了,最终还有些无奈。 对于绝大多数开发者来说,一旦能够应用中使用这些新功能,苹果或许又会带来更多的新诱惑。

36910

WWDC 23 ,SwiftUI 5 SwiftData 的初印象

全新的数据流声明注入方式 利用 Swift 5.9 的新特性,对于引用类型的 Source of truth,只需使用 @Observable 进行标注,视图将对数据源的变化以属性为粒度进行响应。...这从根本上解决了当前影响 SwiftUI 应用( 过渡计算 )的效率问题。让开发者可以更加自由的来设计数据结构以及随心所欲的注入数据源。 不过很遗憾,这项新特性只能在 SwiftUI 5 上实现。...大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 显式的 id 声明)、一次性的定位系统( 视图进入后...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...一开始看到这些信息,我内心无比兴奋,但很快就平静下来了,最终还有些无奈。 对于绝大多数开发者来说,一旦能够应用中使用这些新功能,苹果或许又会带来更多的新诱惑。

1.1K20

深入了解 SwiftUI 5 中 ScrollView 的新功能

SwiftUI 5.0 中,苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍,希望能够它们更多、更早的帮助到有需要的开发者。...可采用 优化 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以滚动视图滚动到特定的位置。...仅适用于 ScrollView 当 ForEach 中的数据源遵循 Identifiable 协议,无需显式使用 id 修饰符设置标识 与 scrollTargetLayout 配合使用,可以获取当前的滚动位置...id) } } } ScrollViewReader scrollPostion(id:) 的内部实现原理应该差不多。...但是,ScrollViewReader 可用于 List 中,还可设置锚点。scrollPostion(id:) 与 scrollTargetLayout 配合使用时,可获取当前滚动位置(标识)。

75420

优化 SwiftUI List 中显示大数据集的响应效率

进一步排除掉 ScrollViewReader 的影响后,所有的迹象都表明用于给 scrollTo 定位的 id 修饰符可能是导致延迟的罪魁祸首。... SwiftUI 应用代码中,绝大多数的视图标识都是通过结构性标识 (有关结构性标识的内容可以参阅 ViewBuilder 研究(下) —— 从模仿中学习[4])来实现的 —— 通过视图层次结构(视图树...使用id 修饰符相当于将这些视图从 ForEach 中拆分出来,因此丧失了优化条件。 总之,当前在数据量较大的情况下,应避免 List 中对 ForEach 的子视图使用 id 修饰符。...新的问题 细心的朋友应该可以注意到,运行解决方案一的代码后,第一次点击 bottom 按钮,大概率会出现延迟情况(并不会立即开始滚动)。...除非没有其他选择,否则我并不推荐大家对 UIKit ( AppKit ) 控件进行重新包装,应使用尽可能微小的侵入方式对 SwiftUI 的原生控件进行补充完善。

9.1K20

Ask Apple 2022 与 SwiftUI 有关的问答(下)

因此,如果你正在创建一个视图来显示可滚动的内容,并可能进行选择操作,那么 iOS macOS 上使用 List 将有最好的体验。...IdentifiedArray ,也不容易引发 ForEach 的异常todos[id:id] = newTodo自定义布局Q:实现自定义布局,处理非常小或非常大的可用空间的边缘情况有多重要?...我采用了常见的解决方案,即旋转滚动视图里面的每个单元格,以获得预期的倒置列表, iOS 上,这很有效。但在 macOS 上,它使 CPU 使用率保持 100%。...A:你最好的选择是使用 ScrollView ScrollViewReader,并在 onAppear 或新内容进来时滚动到最底部的视图。我不建议尝试旋转滚动视图。...image-20221023171100484滚动速度Q:有好的方式 List ScrollView 滑动监听滑动的 velocity 值么?

14.8K30

使用 fartscroll.js 你的网页滚动放屁

放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件你的网页滚动的过程中 放屁。...直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离速度不同,放屁的声音也不同...使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件: // 文档中滚动 400 像素就放屁 $(document...).fartscroll(); // 文档中每滚动 800 像素就放屁 $(document).fartscroll(800); // 网页中没滚动 100 像素就放屁 $("body").fartscroll...(100); // 很多很多的屁 $("body").fartscroll(5); 仅供娱乐和恶搞哈,相信应该没有太多人喜欢访问你网页的时候,听到你网页放屁哈哈。

91020

SwiftUI 的方式进行布局

在上面的代码中,由于两个视图使用了同样的动画曲线设定,因此,移动并不会出现分离的情况。...通过 matchedGeometryEffect 分别为该站位视图的顶部底部设置了两个标识符以保存信息。 视图一、视图二两个状态下分别使用对应的 ID 位置,即可实现本文需求。...四、ScrollView 考虑到本文需求的动画形态( 竖向滚动 ),使用 ScrollViewReader 提供的滚动定位功能,同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸只会提供理想尺寸。...overlay 两种状态,采取不同的布局指南策略,并视图具备不同的优先级状态( 状态切换 ),以此来获得想要的布局结果。

3.2K00

SwiftUI 的方式进行布局

在上面的代码中,由于两个视图使用了同样的动画曲线设定,因此,移动并不会出现分离的情况。...通过 matchedGeometryEffect 分别为该站位视图的顶部底部设置了两个标识符以保存信息。 视图一、视图二两个状态下分别使用对应的 ID 位置,即可实现本文需求。...四、ScrollView 考虑到本文需求的动画形态( 竖向滚动 ),使用 ScrollViewReader 提供的滚动定位功能,同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域,但在询问其子视图的需求尺寸只会提供理想尺寸。...overlay 两种状态,采取不同的布局指南策略,并视图具备不同的优先级状态( 状态切换 ),以此来获得想要的布局结果。

4.8K80

Text 中实现基于关键字的搜索定位

,并可通过按钮搜索结果中进行滚动切换?...本节的内容仅代表我考虑处理上述问题的想法思路。其中不少功能已经超出了原本的需求,增加这些功能一方面有利于更多地融汇以前博客中的知识点,另一方面也提高了解题的乐趣。...去年增加了 AttributedString FormatStyle 后,今年又增加了 Swift 版本的正则表达式实现 —— Regex。...store.onScreenID.removeValue(forKey: transcription.id) } .id(transcription.id)} List 中,每个视图进入显示窗口都会调用它的..._25_53搜索条出现时, TextField 获得焦点通过 @FocusState , TextField 搜索条出现时,自动获得焦点,从而自动开启键盘。

4.2K30

肘子的 Swift 周报 #038 | 更好还是更便宜?

前一期内容|全部周报列表 原创 SwiftUI 滚动控制 API 的发展历程与 WWDC 2024 的新亮点[3] Fatbobman( 东坡肘子 )[4] WWDC 2024 中,苹果再次为 SwiftUI...这一经历不仅有趣,同时也提供了对技术选型性能评估重要性的深刻洞见,强调了选择数据管理方案需要权衡的各种因素。...WebSocket tutorial using Swift and Hummingbird ( 使用 Swift Hummingbird 框架实现 WebSocket 教程 )[11] Tibor...然而,与基于 AppDelegate 的传统方法相比,ScenePhase 处理如应用启动终止等关键事件显得力不从心。...因此,构建自己的生命周期通知机制,开发者可以充分利用这些特性,详情参见 探索 SwiftUI 属性包装器[18]。

10410

肘子的 Swift 周报 | Swift,超越苹果生态!

虽然自 2015 年末起 Swift 便开始支持 Linux,但长期以来,其非苹果平台上的推广应用进展缓慢,许多人仍旧将 Swift 视作苹果生态下的专属语言。...Aryaman Sharda 本文中深入探讨了 ABI 稳定性与库进化模式,并通过实例详细说明了 @frozen 关键字枚举结构体中的应用。...,尤其是当背景色与文字颜色对比度不足。...通过对 NSTableView NSTableCellView 的精心定制,他不仅显著优化了滚动体验,还解决了上下文菜单相关的问题。...实际上,该应用的复杂模板编辑器几乎完全使用 SwiftUI 开发,且表现出色。这一点彰显了 SwiftUI 实际应用中的强大潜力灵活性。

12610

肘子的 Swift 周报 #036 | WWDC 2024 观后感

除了继续加大对社区的支持,苹果推出的新官方框架应用显著提升了 Swift 的应用广度。这些措施无疑将进一步激发社区的活力,增强开发者对使用 Swift 的信心。...如果这成为现实,那么当前的一切等待努力都将是值得的。 SwiftUI 初次接触 SwiftUI 今年的新特性,我并未感到特别兴奋。...然而,做了更多的研究后,我意识到此次更新 SwiftUI 的发展史上将具有十分重要的意义。...从这个版本开始,SwiftUI 开发团队似乎找到了快速发展 SwiftUI 的正确路径,探索出了保持声明式框架特性的同时,有效提升其表现力的方法。...最后 我对 WWDC 2024 的满意程度无疑非常高,这种满意是随着我对新功能新特性的逐步了解与深入体验而逐渐增强的。这种情况最近几届 WWDC 中相对罕见。

11610

苹果全新UI框架来了!可视化编程,自动化减少20%代码量

Swift是苹果最新的开发语言,有人呼吁谷歌取代TensorFlow的Python。目前TOIBE排名18位: ? RedMond排名11 ?...比如在使用源码控制就很麻烦,会导致代码可视化布局之间移动变得非常困难;使用动作和outlets过于依赖flaky系统的连接。...而SwiftUI通过4种方式,解决了上述问题: 用一个新的声明式UI结构,定义了的布局的外观工作方式 更新UI预览会自动生成新的Swift代码,反之,更改Swift代码也会更新UI预览 Swift中的任何绑定例如有效的...outlets操作,都会在编译进行检查,因此在运行时不会出现UI失败的风险 虽然背后使用来自UIKitAppKit的控件,但SwiftUI凌驾于二者之上,能够有效地使底层UI框架成为一个实现细节,...比如,它只支持Swift,你不能在Obj-C里使用SwiftUISwiftUI目前还不是很成熟,正在从事iOS开发的程序员可能更应该继续使用Obj-C,直到SwiftUI足够成熟。

5.4K20

如何结合 Core Data SwiftUI

AppDelegate.swift SceneDelegate.swift 中现在有用于设置 Core Data 的额外代码。...这是 Core Data 的一个领域,该领域会您大为恼火:它具有可选数据的概念,但与 Swift 的可选数据完全不同。...如果我们对 Core Data 说“这不是必须的”(您可以模型编辑器中完成),它仍然会生成可选的 Swift 属性,因为所有 Core Data 关心的是属性保存具有值——在其他时间它们可以为 nil...我们无法代码中看到该类,因为它是构建项目自动生成的,就像 Core ML 的模型一样。...这需要附加到托管对象上下文中,以便对象知道应将其存储何处。然后,我们可以像通常为结构体那样分配值。

11.8K30

SwiftUI + Core Data App 的内存占用优化之旅

本文将通过对一个演示 App 进行逐步内存优化的方式( 由原先显示 100 条数据要占用 1.6 GB 内存,优化至显示数百条数据仅需 200 多 MB 内存 ),读者对 SwiftUI 视图的存续期...正常的情况下( 惰性容器中仅包含一个 ForEach ,且子视图没有使用 id 添加显式标识 ),惰性容器仅会创建当前可见范围内的子视图实例,并对其 body 进行求值( 渲染 )。...{ show = false // 视图离开可视区域,尝试 Item 以及对应的 Picture 对象返回惰值状态 DispatchQueue.main.asyncAfter...} } SwiftUI 只会持有 @StateObject 所对应实例的引用,实例中属性数据的释放仍遵循标准的 Swift 语言逻辑。...总结 SwiftUI 的惰性容器使用起来很方便,并且通过 @FetchRequest 与 Core Data 配合也很方便,这在一定程度上导致开发者有了轻视的心理,认为 SwiftUI + Core Data

1.3K10

AVKit框架详细解析(四) —— 基于AVKit AVFoundation框架的视频流App的构建

你来这里是为了这两个梦想成真。 在此过程中,您将学习 AVKit AVFoundation 框架的基础知识。 本教程中,您将学习如何: 添加本地视频。 添加流媒体视频。 启用播放控件。...AVPlayerLayer } 为了能够 SwiftUI使用此视图,您需要使用 UIViewRepresentable 创建一个包装器。...每次收到通知,您都会知道播放器已进入下一个视频。 要在 Swift使用 KVO——比 Objective-C 中好得多——你需要保留对观察者的引用。...缺点是,撰写本文,iOS 14.5是可用的最新版本,VideoPlayer 的 SwiftUI 视图未显示画中画按钮。...2) 您定义了一个符合 UIViewControllerRepresentable 的结构,以便能够 SwiftUI使用 AVPlayerViewController。

6.9K10

架构之路 (五) —— VIPER架构模式(一)

开始 首先看下主要内容: 本教程中,您将了解如何在SwiftUICombine中使用VIPER体系结构模式,同时构建一个允许用户创建公路旅行的iOS应用程序,来自翻译。...这样就更容易进行测试、维护扩展。 本教程中,您将使用VIPER体系结构模式构建一个应用程序。这款应用也被方便地称为VIPER。 它将允许用户通过向一条路线添加路径点来构建公路旅行。...在此过程中,您还将了解您的iOS项目中的SwiftUICombine。 打开启动项目。这包括一些代码,你开始: 当你构建其他视图,ContentView会启动它们。...当您查看图表,您可以看到数据视图view实体entities之间流动的完整路径。 SwiftUI有自己独特的做事方式。...该模型使用一个JSON文件来实现本地持久性,但是您可以使用一个远程后端来代替它,而不必修改任何ui级代码。这就是干净体系结构的优点之一:当您更改一个部分(比如持久层),它与代码的其他部分是隔离的。

17.4K10

SwiftUI + Core Data App 的内存占用优化之旅

本文将通过对一个演示 App 进行逐步内存优化的方式( 由原先显示 100 条数据要占用 1.6 GB 内存,优化至显示数百条数据仅需 200 多 MB 内存 ),读者对 SwiftUI 视图的存续期...正常的情况下( 惰性容器中仅包含一个 ForEach ,且子视图没有使用 id 添加显式标识 ),惰性容器仅会创建当前可见范围内的子视图实例,并对其 body 进行求值( 渲染 )。...{ show = false // 视图离开可视区域,尝试 Item 以及对应的 Picture 对象返回惰值状态 DispatchQueue.main.asyncAfter...} } SwiftUI 只会持有 @StateObject 所对应实例的引用,实例中属性数据的释放仍遵循标准的 Swift 语言逻辑。...总结 SwiftUI 的惰性容器使用起来很方便,并且通过 @FetchRequest 与 Core Data 配合也很方便,这在一定程度上导致开发者有了轻视的心理,认为 SwiftUI + Core Data

2.4K40
领券