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

SwiftUI列表在任何视图更改时重置滚动

在SwiftUI中,列表是一种常用的视图类型,用于显示多个项目。当列表中的视图发生更改时,比如增加或删除项目,SwiftUI默认会保持滚动位置不变。但有时候我们希望在每次视图更改时将列表滚动位置重置为顶部或底部。下面是一种实现此功能的方法:

首先,我们需要使用ScrollViewReaderScrollViewProxy两个组件来监控和控制列表的滚动位置。ScrollViewReader用于创建一个监视器,而ScrollViewProxy用于实际控制滚动位置。

接下来,我们可以在列表视图外部包裹一个GeometryReader组件,以获取列表视图的几何信息。这样可以在视图更改时获取列表的高度,并将滚动位置重置为顶部或底部。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    var body: some View {
        GeometryReader { geometry in
            ScrollViewReader { scrollViewProxy in
                VStack {
                    Button("Add Item") {
                        // 添加项目
                        items.append(items.count + 1)
                        scrollToTop(scrollViewProxy: scrollViewProxy)
                    }
                    
                    Button("Remove Item") {
                        // 删除项目
                        items.removeLast()
                    }
                    
                    List {
                        ForEach(items, id: \.self) { item in
                            Text("Item \(item)")
                                .frame(height: 50)
                        }
                    }
                    .id(items.count) // 用于更新列表视图
                    .onChange(of: items.count) { _ in
                        scrollToTop(scrollViewProxy: scrollViewProxy)
                    }
                }
            }
        }
    }
    
    // 将滚动位置重置到顶部
    func scrollToTop(scrollViewProxy: ScrollViewProxy) {
        withAnimation {
            scrollViewProxy.scrollTo(0, anchor: .top)
        }
    }
}

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

在上面的代码中,我们创建了一个简单的视图,其中包含一个"Add Item"按钮和一个"Remove Item"按钮。点击"Add Item"按钮会向列表中添加一个新的项目,并将滚动位置重置到顶部。点击"Remove Item"按钮会删除列表中的最后一个项目。

这样,每次列表中的视图发生更改时,滚动位置都会重置到顶部。

在腾讯云相关产品中,可以使用腾讯云函数计算(Serverless Cloud Function)来实现类似的功能。腾讯云函数计算是一种事件驱动的无服务器计算服务,可以根据需要动态地进行规模化调用,无需管理服务器。您可以使用函数计算来响应各种事件,并在函数中编写自定义代码逻辑。更多关于腾讯云函数计算的详细信息,请访问腾讯云函数计算产品介绍页面

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

相关·内容

AnyView 对 SwiftUI 性能的影响

正在测试的列表具有不同类型的数据(例如图像、视频、GIF、文本等)。测试不同实现时执行相同的操作(例如,在内容上滚动三次)。数据以每页 25 个项目的形式获取。...这 2 个卡顿发生在加载新消息并将其附加到消息列表时。加载消息时进行任何后续滚动,不会影响性能。在此测试期间,FPS 值的平均值约为每秒 59 帧。滚动是流畅且响应迅速的。...没有 AnyView没有 AnyView 包装器的情况下进行测试产生了与常规滚动测试相似的结果(58-59 FPS)。这也是预期的,因为 SwiftUI 知道视图的标识和结构。...这意味着,当列表发生更改时,我们实际上重新创建了整个列表。这也解释了为什么 AnyView 实现随着时间的推移变慢 - 每次重绘时都需要从头开始创建更多内容。...总结总而言之,在这些情景中(包含异构视图的可滚动列表),最好为容器中的不同视图使用具体类型。这可能听起来复杂一些,但实际上你可以使其简单,而不必过多地处理泛型。

14200

WWDC 23 之后的 SwiftUI 有哪些新功能

也不再需要 @Published 属性包装器,因为 SwiftUI 视图会自动跟踪任何可观察类型的可用属性的更改。...之前的 SwiftUI 框架版本中,应该使用 @ObservedObject 属性包装器来订阅更改。现在不需要了,因为 SwiftUI 视图会自动跟踪符合 Observable 协议的类型的更改。...动画 动画始终是 SwiftUI 框架中最重要的部分。 SwiftUI 中轻松实现任何动画,但之前的框架版本缺少一些现在具有的功能。...还可以通过编程方式滚动任何视图,但是,应该使用 scrollTargetLayout 视图修饰符来告诉 SwiftUI 框架在哪里查找标识以更新绑定。...它允许滚动视图中启用分页。 搜索 与搜索相关的视图修饰符也有一些很好的新增功能。例如,可以通过编程方式聚焦到搜索字段。

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

    进入视图的时候有明显的卡顿(1 秒多钟),进入后列表滚动流畅且可无延迟的响应滚动列表底部或顶部的指令。...找寻问题原因 或许有人会认为,毕竟数据量较大,进入列表视图有一定的延迟是正常的。但即使 SwiftUI 的效能并非十分优秀的今天,我们仍然可以做到以更小的卡顿进入一个数倍于当面数据量的列表视图。...另外如果 id 的标识值发生变化,SwiftUI 将丢弃原视图(生命周期终止及重置状态)并重新创建新的视图。...我们将通过 SwiftUI-Introspect[7] 来实现在 List 中滚动列表两端。...对于拥有复杂结构子视图(尺寸不一致、图文混排)的 List 来说,在数据量大的情况下,任何的大跨度滚动( 例如直接滚动列表底部 )都会给 List 造成巨大的布局压力,有不小的滚动失败的概率。

    9.2K20

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

    使用 scrollIndicatorsFlash(trigger:) 可以提供的值更改时,修饰符作用域范围内的所有可滚动容器的滚动指示器短暂闪烁。...当 scrollClipDisable 为 false 时,滚动内容会被裁剪以适应滚动容器边界。任何超出边界的部分将不会显示。...可采用 优化 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...(视图标识) 不支持锚点设定,固定锚点为子视图的 center 正如 优化 SwiftUI List 中显示大数据集的响应效率[6] 一文所提到的,当数据集很大时,也会出现性能问题。....automatic 是默认行为,紧凑的水平尺寸类中受限,否则不受限。 .always 始终限制可滚动视图的数量。 .never 不限制可滚动视图的数量。

    83620

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

    SwiftUI 4.0 的 Form Ventura 上的表现与以往版本有很大的不同。形式上接近 iOS 的状态,同时也对 mac 进行了更多的适配。...复杂的 UI 中,由于视图的更新速度过快,性能( 至少 macOS 上 )迅速下降。A:有不同的策略。ObservableObject 是使视图视图层次结构的失效( 引发重新计算 )的单元。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q:我如何实现一个底部对齐的滚动视图 macOS 上会不会有糟糕的性能?...我采用了常见的解决方案,即旋转滚动视图和里面的每个单元格,以获得预期的倒置列表 iOS 上,这很有效。但在 macOS 上,它使 CPU 使用率保持 100%。...这意味着我们不能使用 LazyVStack,或任何其他将选择与详细视图绑定的自定义视图。有扩展这个功能的计划吗?A: iOS 16.1 中,你可以侧边栏里放一个。

    14.8K30

    SwiftUI 中掌握 ScrollView 的使用:滚动可见性

    前言我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查并监控 ScrollView 内视图的可见性状态。...视图修饰符让我们先从 onScrollTargetVisibilityChange 视图修饰符开始。它设计得易于使用,允许你将其附加到具有滚动目标布局的任何 ScrollView 上。...操作闭包内,我们获取可见标识符列表,并可以对可见项执行所需的操作。有时,视图需要在其可见性状态 ScrollView 中发生变化时进行响应。...对于这些情况,SwiftUI 框架引入了 onScrollVisibilityChange 视图修饰符,你可以将其附加到 ScrollView 内的任何视图上以处理其可见性。...完整示例上面对视图修饰符有了初步了解,它的设计得易于使用,允许你将其附加到具有滚动目标布局的任何 ScrollView 上。让我们通过一个示例来探讨这个修饰符的使用。

    17421

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 和显式的 id 声明)、一次性的定位系统( 视图进入后...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端和显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...这是我目前整理的一些有关 SwiftData 的问题和注意事项( 原文发表推文中,没有进行系统的归纳): 尚不支持公共和共享数据的云同步 在当前版本中,通过其他上下文(ModelContext)创建的数据并不会自动合并到视图上下文中...然而,Core Data with CloudKit API 客户端方面没有任何调整,很令人失望。...订阅下方的 邮件列表[7],可以及时获得每周最新文章。

    38510

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

    ,并可通过按钮搜索结果中进行滚动切换?...请阅读 优化 SwiftUI List 中显示大数据集的响应效率[6] 以及 避免 SwiftUI 视图的重复计算[7] 两篇文章,了解更多有关性能优化方面的内容通过 currentPostion 获取需要滚动到的...总结范例代码并没有十分刻意地创建规范的数据流,但由于做到视图与数据分离,因此将其改写成任何你想使用的数据流方式并非难事。...每周也会对当周博客上的新文章以及 Twitter 上发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅 邮件列表[14],可以及时获得每周的 Tips 汇总。.../onChange/[9] SwiftUI 视图的生命周期研究: https://www.fatbobman.com/posts/swiftUILifeCycle/[10] SwiftUI 视图中打开

    4.2K30

    SwiftUI 中的内容边距

    前言SwiftUI 引入了一组视图修饰符,使我们能够有效地管理视图中的安全区域。许多情况下,安全区域是你希望放置内容的地方。...然而,正如你所见,这也将滚动条指示器从后导边缘移到了中心。使用 contentMargins我们需要一种区分视图的内容和工具栏,并仅移动内容而保持工具栏原地的方法。...幸运的是,SwiftUI 引入了新的 contentMargins 视图修饰符,使我们能够视图中移动特定类型的内容。...但是它将滚动条保留在视图的后导边缘。contentMargins 视图修饰符接受几个参数,允许我们调整其行为。第一个参数是我们想要移动的边缘。...文章从创建示例开始,展示了列表视图中如何处理内容边距的问题。

    17632

    SwiftU:将状态绑定到UI控件

    SwiftUI的@State属性包装器允许我们自由修改视图结构体,这意味着当程序更改时,我们可以更新视图属性以匹配。 但是,使用UI控件时,事情会复杂一些。...但是,该代码不会编译,因为SwiftUI想知道文本字段中的文本存储位置。 请记住,视图是其状态的函数——文本输入框只能在反映存储程序中的值时显示某些内容。...SwiftUI需要的是结构中的一个字符串属性,它可以显示文本输入框中,还将存储用户文本输入框中键入的任何内容。...问题是Swift区分了“在此处显示此属性的值”和“在此处显示此属性的值,但将任何更改写回该属性” Swift中,我们用一个特殊的符号来标记这些双向绑定,这样它们就很显眼:我们它们前面写一个美元符号$...这告诉Swift,它应该读取属性的值,但也应该在发生任何改时将其写回。

    2.9K10

    如何判断 ScrollView、List 是否正在滚动

    本文将介绍几种 SwiftUI 中获取当前滚动状态的方法,每种方法都有各自的优势和局限性。...: UIScrollView, willDecelerate decelerate: Bool)手指拖动结束后( 手指离开时 ),调用此方法 SwiftUI 中,很多的视图控件是对 UIKit( AppKit...:PreferenceKey SwiftUI 中,子视图可以通过 preference 视图修饰器向其祖先视图传递信息( PreferenceKey )。...preference 与 onChange 的调用时机非常类似,只有值发生改变后才会传递数据。 ScrollView、List 发生滚动时,它们内部的子视图的位置也将发生改变。...每周也会对当周博客上的新文章以及 Twitter 上发布的 Tips 进行汇总,并通过邮件列表的形式发送给订阅者。订阅下方的 邮件列表[9],可以及时获得每周的 Tips 汇总。

    3.8K40

    WWDC 23 ,SwiftUI 5 和 SwiftData 的初印象

    大幅改善了 ScrollView 的控制力 本次升级中,为 ScrollView 带来了新的动态滚动定位系统( 不依赖 ScrollViewReader 和显式的 id 声明)、一次性的定位系统( 视图进入后...,直接定位到滚动视图的特定位置,只能使用一次 )、全新的滚动条控制( 闪烁 )、可自定义行视图滚动区域的顶端和显示区域的显示状态( 例如可用其实现类似 watchOS 中的滚动到顶端子视图缩小的视觉效果...)、支持分页滚动( 开发者长期盼望的 )、自定义滚动内容的缩进、为滚动内容(非滚动容器)添加安全区域等众多功能。...这是我目前整理的一些有关 SwiftData 的问题和注意事项( 原文发表推文中,没有进行系统的归纳): 尚不支持公共和共享数据的云同步 在当前版本中,通过其他上下文(ModelContext)创建的数据并不会自动合并到视图上下文中...然而,Core Data with CloudKit API 客户端方面没有任何调整,很令人失望。

    1.1K20

    SwiftUI 中的作用域动画

    前言从一开始,动画就是 SwiftUI 最强大的功能之一。你可以 SwiftUI 中快速构建流畅的动画。...动画视图修饰符我们可以通过使用动画视图修饰符的另一个版本来消除意外动画,在这个版本中,我们可以绑定到特定值,并且仅在值更改时进行动画处理。...它允许我们将动画范围限定为单个值,并仅在与特定值相关的更改时执行动画。在这种情况下,我们没有任何意外的动画。使用多个可动画属性如果我们有多个可动画属性怎么办?... ViewBuilder 闭包内部,可以安全地对视图应用任何视图修饰符,并期望仅对此代码块进行动画处理。...总结这篇文章介绍了SwiftUI中构建动画的新方法,重点解决了多步动画或特定视图层次结构中控制动画的挑战。

    17210

    解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

    这两个错误包括:通过手势取消 Sheet 后,快速右滑导航容器导致应用锁死;以及滚动中返回上层视图时导致应用崩溃。...原文发表我的博客 肘子的Swift记事本视图变化在前、状态变化在后 SwiftUI 中,某些可编程控件执行一定的操作时,会先更新视图,待视图变化完成后再修改与其对应的状态。...当视图正在滚动时返回上一层视图会导致应用崩溃这是一个由 xiaogd 我的 Discord 论坛中提出的 问题。...它的复现条件如下:iOS 16 系统,真机或模拟器上测试点击视图列表中的按钮,可以进入下一级视图。...请至少进入第三级视图滚动当前视图视图处于滚动状态时,点击 NavigationStack 左上角的 “Back” 按钮。

    707110

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

    我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用的内存占用为 1.6 GB 左右。...无优化滚动至底截屏 从 Instruments 的分析来看,随着列表滚动,内存占用持续增加中。 无优化效果 相信任何开发者都无法容忍这种内存占用的情况出现。...第一轮优化:对视图 body 值进行优化 第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图的 body 值仍将占用不小的内存。...这意味着,托管对象上下文中,data 属性即使填充后也仅有 50 个字节( 文件 ID )。 目前无法找到 Core Data 在行缓存以及上下文中处理这些外置二进制数据的任何资料。

    1.3K10

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

    这与SwiftUI不同,SwiftUI中,视图显示任何视图。 这种分离来自“Uncle”Bob Martin的Clean Architecture paradigm。...要将VIPER映射到SwiftUI视图现在负责显示/隐藏视图,路由router是一个目标视图生成器,presenter它们之间进行协调。...当您将其放置NavigationView中时,该链接将成为一个按钮,将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图。...Considering the Map View 转向细节视图之前,考虑一下地图视图。这个widget比其他的复杂。 除了绘制地理特征,该应用还会覆盖每个点的大头针pins和它们之间的路线。...您可以trip detail视图中重新排列列表。但是要创建一个新的waypoint,您需要一个新视图,以便用户输入名称。 为了得到一个新的视图,你需要一个Router。

    17.5K10

    如何使用 SwiftUI 中新地图框架 MapKit

    iOS 17 中,MapKit 为 SwiftUI 引入了需要 MapContentBuilder 参数的地图初始化器。下面为大家介绍一下MapKit 相关的基础知识。...这意味着可以将它们放置视图任何位置,不过需要定义一个地图范围命名空间,以将它们与它们控制的地图关联起来,代码如下: struct ContentView: View { @Namespace var...总结 这就是 iOS 17 中使用 SwiftUI 中的 MapKit 所需要了解的内容。...通过引入 MapContentBuilder 和其他新的初始化器,可以方便地创建交互式地图视图,添加标记、注释和自定义内容,并在用户移动地图相机时自动更新位置。...这些改进使得 SwiftUI 中使用 MapKit 变得更加强大和灵活。 - EOF -

    68031

    SwiftUI WWDC 24 之后的新变化

    视图集合SwiftUI 为 Group 和 ForEach 视图引入了新的重载,允许我们创建自定义容器,如 List 或 TabView。...SwiftUI 引入了新的 Subview 和 SubviewsCollection 类型,提供了对真实视图的代理访问。...英雄动画SwiftUI 引入了 matchedTransitionSource 和 navigationTransition,我们可以在任何 NavigationLink 实例中配对使用。...滚动位置新的 ScrollPosition 类型与 scrollPosition 视图修饰符配对,允许我们读取 ScrollView 实例的精确位置。我们还可以使用它编程地滚动滚动内容的特定点。...今年的主要变化包括 @MainActor 隔离、视图集合的新重载、新的可定制标签栏体验、英雄动画、滚动位置的新功能以及新的 Entry 和 Previewable 宏。

    13110

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

    我们创建完 100 条数据后,重启应用( 重启可以更精准地测量内存占用情况 )并滚动列表至底部。此时该应用的内存占用为 1.6 GB 左右。...图片 从 Instruments 的分析来看,随着列表滚动,内存占用持续增加中。 图片 相信任何开发者都无法容忍这种内存占用的情况出现。下文中,我们将对这段代码进行逐步优化,以达到最终可用的程度。...第一轮优化:对视图 body 值进行优化 第一轮优化中,我们会首先尝试从 SwiftUI 的角度入手。...本例中,子视图的 body 值中一定会包含用于显示的图片数据,因此,即使该视图已经被显示过( 滚动出显示区域 ),该视图的 body 值仍将占用不小的内存。...这意味着,托管对象上下文中,data 属性即使填充后也仅有 50 个字节( 文件 ID )。 目前无法找到 Core Data 在行缓存以及上下文中处理这些外置二进制数据的任何资料。

    2.4K40
    领券