SwiftUI ScrollView：查找当前在屏幕中心可见的子视图。子视图在 ScrollView 中的位置。偏好键。滚动视图代理

Question

挑战：我想跟踪 ScrollView 的哪个子视图位于该 ScrollView 可见区域的中间。

问题：据我了解，没有原生 SwiftUI 方法可以确定 ScrollView 的子视图当前在屏幕上是否可见。或者我想念这里的什么吗？

我的解决方案：我使用 PreferenceKey 来收集子视图位置，并在 ScrollView 滚动时连续发生的 PreferenceChange 上执行操作：检查最接近屏幕中心的视图。

问题：基于 PreferenceKey 的解决方案适用于一些子视图。但我需要跟踪最多 3000 个子视图（从数据库构建的大型结构化文档的视图）。即使在实施了我能够提出的一些优化之后，大量视图的性能也是不可接受的。

我的问题是：有吗

• 提高下面所示解决方案性能的方法，或者
• 应对这一挑战的不同方式

（iOS 14.4 / Xcode 12.4）

private struct ViewOffsetsKey: PreferenceKey {
    static var defaultValue: [Int: CGFloat] = [:]
    static func reduce(value: inout [Int: CGFloat], nextValue: () -> [Int: CGFloat]) {
        value.merge(nextValue(), uniquingKeysWith: { $1 })
    }
}

struct ContentView: View {
    @State private var offsets: [Int: CGFloat] = [:]
    @State private var mainViewHeight: CGFloat = 800   // demo approximation
    @State private var highlightItem: Bool = false
    @State private var timer = Timer.publish(every: 0.5, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack(alignment: .top) {
            VStack {
                ScrollView {
                    VStack {
                        ForEach(0..<3000) { i in
                            Text("Item \(i)")
                                .id(i)
                                .padding()
                                .background(GeometryReader { geo in
                                    Color.clear.preference(
                                        key: ViewOffsetsKey.self,
                                        value: [i: geo.frame(in: .named("scrollView")).origin.y]) })
                                .overlay((i == middleItemNo && highlightItem) ? Color.orange.opacity(0.5) : Color.clear)
                        }
                    }
                    .onPreferenceChange(ViewOffsetsKey.self, perform: { prefs in
                        let filteredPrefs = prefs.filter { $1 > 0 && $1 < mainViewHeight }
                        // Cleaning offsets seams to increase reliablilty.
                        offsets = [:]
                        // Dispatch to silence "Bound preference ... update multiple times per frame" warning.
                        DispatchQueue.main.async {
                            for pref in filteredPrefs { offsets[pref.key] = pref.value }
                        }
                        timer = Timer.publish(every: 0.5, on: .main, in: .common).autoconnect()
                    })
                }.coordinateSpace(name: "scrollView")
            }
            
            HStack {
                Text("Middle item no: \(middleItemNo)")
                    .padding(5)
                    .background(Color.white)
                Spacer()
            }.onReceive(timer) { _ in
                highlightItem = true
                timer.upstream.connect().cancel()
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    highlightItem = false
                }
            }
        }
    }
    
    private var middleItemNo: Int {
        offsets.sorted(by: { $0 < $1 }).first(where: { $1 >= mainViewHeight / 2 - 100 })?.key ?? 0
    }
}

Answer 1

将 ScrollView 中的 VStack 更改为 LazyVStack 可以解决性能问题。发表帖子后才提出这个想法。我会把它留在网上供其他人学习。