SwiftUI 如何使用 ScrollViewReader 使滚动视图移动到某个位置?

17 min read

ScrollViewReader 是 SwiftUI 中的一个视图,它允许在 ScrollView 中选择某个位置并将其滚动到可见的部分。使用 ScrollViewReader 需要三个步骤:

1.创建 ScrollView

首先需要创建一个 ScrollView,这可以通过以下代码实现:

ScrollView {
    // 添加元素
}

2.使用 ScrollViewReader

接下来需要在 ScrollView 中添加一个 ScrollViewReader。这可以通过以下代码实现:

ScrollView {
    ScrollViewReader { value in
        // 添加元素
    }
}

3.选择滚动位置

现在可以在添加元素的代码中选择要滚动的位置。可以通过为元素添加一个唯一的 id 属性,在 ScrollViewReader 中使用 scrollTo(id:) 方法将滚动位置滚动到指定的元素。以下是一个完整的示例代码:

struct ContentView: View {
    var body: some View {
        ScrollView {
            ScrollViewReader { value in
                Button("Jump to 10") {
                    withAnimation {
                        value.scrollTo(10)
                    }
                }

                ForEach(0..<20) { i in
                    Text("Item \(i)")
                        .frame(height: 50)
                        .id(i)
                }
            }
        }
    }
}

这个例子中,点击 "Jump to 10" 按钮将滚动位置滚动到 id 为 10 的元素。注意 scrollTo(id:) 方法需要放在一个 withAnimation 中,这样滚动过程会平滑一些。