在 SwiftUI 中使用 ScrollViewReader.scrollTo 实现 LazyVStack 精准滚动，解决滚动停止问题

2024-03-29 16:21:33

在 SwiftUI 中使用 ScrollViewReader.scrollTo 实现 LazyVStack 精准滚动

简介

在 SwiftUI 中使用 LazyVStack 来创建可滚动的视图时，有时需要滚动到特定元素。ScrollViewReader.scrollTo 提供了一种解决方案，但它可能会导致滚动视图在固定标题下方停止，而不是在标题下方停止。本文将探讨这一问题并提供一个解决方法，以便实现流畅、准确的滚动。

问题：标题下方的滚动停止

默认情况下，ScrollViewReader.scrollTo 将滚动视图滚动到指定元素，但它会在固定标题下方停止。例如，如果您有一个带有标题的 LazyVStack，当您使用 ScrollViewReader.scrollTo 滚动到其中的一个元素时，滚动视图将停止在标题下方，而不是元素的上方。

解决方案：结合使用 pinnedViews

要解决这个问题，我们需要将 ScrollViewReader.scrollTo 与 pinnedViews 修饰符结合使用。pinnedViews 指定了在滚动视图滚动时应固定的视图。通过将 pinnedViews 用于标题部分，我们可以确保当滚动到特定元素时，标题保持固定在屏幕顶部。

LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
    // 代码略...
}

完整代码示例

下面是一个完整的代码示例，演示如何使用 ScrollViewReader.scrollTo 和 pinnedViews 在 SwiftUI 中实现 LazyVStack 的精确滚动：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            ScrollViewReader(content: { proxy in
                ScrollView {
                    LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
                        // 代码略...

                        Section {
                            NestedSectionsView()
                                .frame(maxWidth: .infinity)
                        } header: {
                            Header().opacity(0.5)
                        }
                    }
                    .onAppear {
                        // 滚动到特定部分
                        proxy.scrollTo(sections[2].hashValue, anchor: .top)
                    }
                }
            })
        }
        .padding()
    }
}