掌握 SwiftUI ScrollView 的监听技巧，解锁流畅滚动体验

2023-07-01 22:46:52

使用 SwiftUI 监听 ScrollView 的滚动偏移量

在 SwiftUI 中，ScrollView 是用于在有限空间内显示大量内容并支持滚动交互的组件。为了增强用户交互体验并实现动态布局调整、数据加载等功能，监听 ScrollView 的滚动偏移量至关重要。

## 监听 ScrollView 的 contentOffset

要监听 ScrollView 的滚动偏移量，可以使用以下方法：

GeometryReader 和 onChanged 修饰符：
- GeometryReader 提供滚动视图的大小信息。
- onChanged 修饰符监听 ScrollViewPreferenceKey 值的变化，该值存储了滚动偏移量。

## 代码示例

struct ContentView: View {
    @State private var contentOffset: CGPoint = .zero

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                VStack {
                    ForEach(0..<100) { _ in
                        Text("Item")
                    }
                }
                .frame(width: geometry.size.width)
                .background(Color.blue.opacity(0.1))
                .onPreferenceChange(ScrollViewPreferenceKey.self) { value in
                    contentOffset = value
                }
            }
        }
    }
}

struct ScrollViewPreferenceKey: PreferenceKey {
    static var defaultValue: CGPoint = .zero

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

extension View {
    func onPreferenceChange<T: Equatable>(_ key: PreferenceKey<T>, perform action: @escaping (T) -> ()) -> some View {
        preference(key: key, value: OnPreferenceChangePreference(action: action))
    }

    struct OnPreferenceChangePreference<T: Equatable>: Preference {
        let action: (T) -> ()
        func reduce(value: inout T, nextValue: () -> T) {
            if value != nextValue() {
                action(nextValue())
            }
        }
    }
}