1

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

问题：我知道没有原生的 SwiftUI 方法来确定 ScrollView 的子视图当前是否在屏幕上可见。还是我在这里想念什么？

我的解决方案：我正在使用 PreferenceKey 收集子视图位置并在滚动 ScrollView 时连续发生的 onPreferenceChange(s) 行动：检查最靠近屏幕中心的视图。

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

我的问题是：有没有

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

(iOS 14.4 / Xcode 12.4)

屏幕中心的 SwiftUI 跟踪子视图

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
    }
}
4

1 回答 1

0

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

于 2021-04-03T20:56:35.873 回答