SwiftUI 滚动偏移

从视图层级的任何位置读取和更新 SwiftUI ListScrollView 的滚动偏移。

开始使用

使用 scrollOffsetID 修饰符,允许任何子视图读取第一个滚动容器的偏移量。

struct ContentView: View {
    var body: some View {
        ScrollView {
            ChildView()
        }
        .overlay(ChildView())
        .scrollOffsetID(.automatic)
    }
}

使用 ScrollOffset 从提供的边缘读取滚动偏移量。 滚动偏移量是相对于任何安全区域插图计算的。

struct ChildView: View {
    @ScrollOffset(.top) private var scrollOffset
    
    var body: some View {
        Text(verbatim: "\(scrollOffset)")
    }
}

ScrollOffset 提供一个范围来限制滚动偏移量。 这可以防止超出此范围的更改更新视图。

@ScrollOffset(.top, in: -20...0) private var scrollOffset

高级用法

scrollOffsetID 提供一个唯一的标识符,以便从视图层级的任何位置读取滚动偏移量。 使用 ScrollOffsetprojectedValue 以编程方式滚动到某个偏移量。

struct ContentView: View {
    var body: some View {
        VStack {
            ScrollView {
                Rectangle()
                    .fill(.blue.opacity(0.1))
                    .frame(height: 1200)
            }
            .scrollOffsetID("Foo")
            
            SiblingView()
                .padding()
        }
    }
}


struct SiblingView: View {
    @ScrollOffset(.top, id: "Foo") private var scrollOffset
    
    var body: some View {
        Text(verbatim: "\(scrollOffset)")
        
        Button("Scroll to Top") {
            $scrollOffset.scrollTo(.zero, withAnimation: true)
        }
    }
}

使用 ScrollOffsetProxy 读取偏移量或以编程方式滚动到偏移量,而无需在偏移量更改时更新视图。

struct ContentView: View {
    @ScrollOffsetProxy(.bottom, id: "Foo") private var scrollOffsetProxy
    
    var body: some View {
        VStack {
            List {
                Section {
                    ForEach(0..<100) { number in
                        Text(verbatim: "\(number)")
                    }
                }
            }
            .scrollOffsetID("Foo")
            
            Button("Scroll to Bottom") {
                scrollOffsetProxy.scrollTo(.zero, withAnimation: true)
            }
            .padding()
        }
    }
}

查看示例了解更多信息。

要求

安装

CocoaPods

要使用 CocoaPods 安装,请将依赖项添加到您的 Podfile 中。

pod 'SwiftUIScrollOffset'

依赖项

联系方式

Twitter 上的@ciaranrobrien