SwiftUI ScrollView滚动到相对位置

基础概念

ScrollView 是 SwiftUI 中的一个视图容器，允许用户通过滚动查看其内容，特别是当内容的尺寸超过屏幕尺寸时。ScrollView 可以包含多种类型的视图，如文本、图像或其他布局容器。

类型

ScrollView 有两种主要类型：

垂直滚动：默认情况下，ScrollView 沿垂直方向滚动。
水平滚动：通过设置 horizontal 属性为 true，可以实现水平滚动。

应用场景

长列表：当需要展示大量数据或内容时，如新闻列表、商品列表等。
复杂布局：当内容的布局超过屏幕尺寸时，如大图查看器、详细信息页面等。

滚动到相对位置

在 SwiftUI 中，ScrollView 本身不直接支持滚动到特定位置的功能，但可以通过结合 GeometryReader 和 PreferenceKey 来实现。

示例代码

以下是一个示例，展示如何滚动到 ScrollView 中的特定位置：

import SwiftUI

struct ContentView: View {
    @State private var offset: CGFloat = 0

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack {
                    ForEach(0..<50) { index in
                        Text("Item \(index)")
                            .frame(height: 100)
                            .id(index)
                    }
                }
                .background(GeometryReader { proxy in
                    Color.clear.preference(key: ScrollOffsetPreferenceKey.self, value: -proxy.frame(in: .named("scroll")).origin.y)
                })
            }
            .coordinateSpace(name: "scroll")
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                offset = value
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(GeometryReader { proxy in
                Color.clear
                    .preference(key: ScrollToPositionPreferenceKey.self, value: offset > 200 ? 200 : offset)
            })
        }
        .onPreferenceChange(ScrollToPositionPreferenceKey.self) { value in
            withAnimation(.spring()) {
                offset = value
            }
        }
    }
}

struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value += nextValue()
    }
}

struct ScrollToPositionPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}