ScrollViewReader

Scroll View Reader 让你可以访问一个名为 scrollTo 的函数。通过这个函数，你可以通过自动滚动使滚动视图中的某个视图可见。

介绍

使用 ScrollViewReader 访问 scrollTo 函数，以便以编程方式滚动到特定视图。视图的滚动主要是通过视图的 id 修饰符的值。

import SwiftUI

struct ScrollViewReader_Intro: View {
    var body: some View {
        VStack(spacing: 20.0) {
            HeaderView("ScrollViewReader", subtitle: "介绍", desc: "使用 ScrollViewReader 访问 scrollTo 函数，以便以编程方式滚动到特定视图。 ")
            
            ScrollViewReader { scrollViewProxy in
                Button("滚动到底部") {
                    scrollViewProxy.scrollTo(50)
                }
                ScrollView {
                    ForEach(1..<51) { index in
                        getImage(for: index)
                            .font(.largeTitle)
                            .frame(height: 70)
                            .id(index)
                    }
                }
                
                Button("滚动到顶部") {
                    scrollViewProxy.scrollTo(1)
                }
            }
        }
        .font(.title)
    }
    
    func getImage(for index: Int) -> some View {
        if index == 1 || index == 50 {
            return Image(systemName: "\(index).square.fill")
                .foregroundStyle(Color.red)
        }
        
        return Image(systemName: "\(index).square")
            .foregroundStyle(Color.primary)
    }
}

#Preview {
    ScrollViewReader_Intro()
}

效果如下所示

锚点Anchor

你可以在调用 scrollTo 时控制视图要滚动到的位置。

import SwiftUI

struct ScrollViewReader_Anchor: View {
    var body: some View {
        VStack(spacing: 20) {
            HeaderView("ScrollViewReader", subtitle: "锚点 Anchor ", desc: "你可以在调用 scrollTo 时控制视图要滚动到的位置.")
            
            ScrollViewReader { scrollViewProxy in
                Button("滚动 25 到顶部") {
                    scrollViewProxy.scrollTo(25, anchor: .top)
                }
                
                HStack(spacing: 20) {
                    Button("将 25 滚动到中心") {
                        scrollViewProxy.scrollTo(25, anchor: .center)
                    }
                    ScrollView {
                        ForEach(1..<51) { index in
                            Image(systemName: "\(index).square.fill")
                                .font(.largeTitle)
                                .frame(height: 70)
                                .foregroundStyle(index == 25 ? .red : .gray)
                                .id(index)
                        }
                    }
                }
                Button("将 25 滚动到底部") {
                    scrollViewProxy.scrollTo(25, anchor: .bottom)
                }
            }
        }
        .font(.title)
    }
}

#Preview {
    ScrollViewReader_Anchor()
}

效果如下所示

动画

您可以通过在 scrollTo 函数周围放置 withAnimation 来为滚动添加动画效果。

import SwiftUI

struct ScrollViewReader_Animating: View {
    var body: some View {
        VStack(spacing: 20.0) {
            HeaderView("ScrollViewReader", subtitle: "动画", desc: "您可以通过在 scrollTo 函数周围放置 withAnimation 来为滚动添加动画效果。")
            
            ScrollViewReader { scrollViewProxy in
                Button("动画滚动到底部") {
                    withAnimation {
                        scrollViewProxy.scrollTo(50)
                    }
                }
                ScrollView {
                    ForEach(1..<51) { index in
                        getImage(for: index)
                            .font(.largeTitle)
                            .frame(height: 70)
                            .id(index)
                    }
                }
                
                Button("动画滚动到顶部") {
                    withAnimation {
                        scrollViewProxy.scrollTo(1)
                    }
                }
            }
        }
        .font(.title)
    }
    
    func getImage(for index: Int) -> some View {
        if index == 1 || index == 50 {
            return Image(systemName: "\(index).square.fill")
                .foregroundStyle(Color.red)
        }
        
        return Image(systemName: "\(index).square")
            .foregroundStyle(Color.primary)
    }
}

#Preview {
    ScrollViewReader_Animating()
}

效果如下所示