swiftui - 从 SwiftUI 的 ScrollView 中的列表中获取 onAppear 行为

Question

创建 List 时查看 onAppear以您期望的方式触发该列表中的元素:一旦滚动到该元素，onAppear触发器。但是，我正在尝试实现这样的水平列表

ScrollView(.horizontal) { 
   HStack(spacing: mySpacing) {
      ForEach(items) { item in 
         MyView(item: item)
            .onAppear { \\do something }
      } 
   }
}

使用此方法 onAppear一次触发所有项目，也就是说:立即，但我想要与 List 相同的行为看法。我该怎么做呢？是否有手动方式来触发 onAppear，或控制 View 何时加载？

为什么我要实现这个:我做了一个自定义 Image仅在出现时才从 URL 加载图像的 View (同时替换占位符)，这适用于 List查看，但我希望它也适用于我的水平“列表”。

Answer 1

这是如何做到这一点的可能方法(测试/使用 Xcode 11.2/iOS 13.2)

演示:(仅在 ScrollView 中动态显示第一个和最后一个可见单元格)



几个重要的View扩展

extension View {
    func rectReader(_ binding: Binding<CGRect>, in space: CoordinateSpace) -> some View {
        self.background(GeometryReader { (geometry) -> AnyView in
            let rect = geometry.frame(in: space)
            DispatchQueue.main.async {
                binding.wrappedValue = rect
            }
            return AnyView(Rectangle().fill(Color.clear))
        })
    }
}

extension View {
    func ifVisible(in rect: CGRect, in space: CoordinateSpace, execute: @escaping (CGRect) -> Void) -> some View {
        self.background(GeometryReader { (geometry) -> AnyView in
            let frame = geometry.frame(in: space)
            if frame.intersects(rect) {
                execute(frame)
            }
            return AnyView(Rectangle().fill(Color.clear))
        })
    }
}

以及如何将它们与 ScrollView 中的单元格 View 一起使用的演示 View

struct TestScrollViewOnVisible: View {
    @State private var firstVisible: Int = 0
    @State private var lastVisible: Int = 0
    @State private var visibleRect: CGRect = .zero
    var body: some View {
        VStack {
            HStack {
                Text("<< \(firstVisible)")
                Spacer()
                Text("\(lastVisible) >> ")
            }
            Divider()
            band()
        }
    }

    func band() -> some View {
        ScrollView(.horizontal) {
            HStack(spacing: 10) {
                ForEach(0..<50) { i in
                    self.cell(for: i)
                        .ifVisible(in: self.visibleRect, in: .named("my")) { rect in
                            print(">> become visible [\(i)]")

                            // do anything needed with visible rects, below is simple example
                            // (w/o taking into account spacing)
                            if rect.minX <= self.visibleRect.minX && self.firstVisible != i {
                                DispatchQueue.main.async {
                                    self.firstVisible = i
                                }
                            } else
                            if rect.maxX >= self.visibleRect.maxX && self.lastVisible != i {
                                DispatchQueue.main.async {
                                    self.lastVisible = i
                                }
                            }
                        }
                }
            }
        }
        .coordinateSpace(name: "my")
        .rectReader(self.$visibleRect, in: .named("my"))
    }

    func cell(for idx: Int) -> some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.yellow)
            .frame(width: 80, height: 60)
            .overlay(Text("\(idx)"))
    }
}