我如何确定视图在 SwiftUI 中的最后一行代码之前完全呈现？

Question

我有一些代码，它们必须在视图完全渲染和绘制后被触发，因为我们知道我们为视图获取了 onAppear 或 onChange，它们对于了解视图是否已经出现或正在更改很有用，但它们对于确保 View 已 100% 渲染没有用处，例如，如果我们在 View 中有 ForEach、List 或 Form，您可以看到 View，但由于层次结构，ForEach 仍然可以在 View 上工作，这意味着视图没有完全加载，如果你给了一个动画修改器，它可能会变得更加明显，然后你也可以看到它，所以我的目标是知道我如何能 100% 确保我的视图被渲染到里面的所有内容，并且渲染视图将不再需要运行代码？

感谢阅读和帮助

---

例子：

import SwiftUI


struct ContentView: View {

    var body: some View {

        HierarchyView()
            .onAppear() { print("HierarchyView"); print("- - - - - - - - - - -") }

    }

}



struct HierarchyView: View {

    var body: some View {

        ZStack {

            Color
                .blue
                .ignoresSafeArea()
                .onAppear() { print("blue"); print("- - - - - - - - - - -")  }

            VStack {
                
                Text("Top text")
                    .onAppear() { print("Top Text") }
                
                Spacer()
                    .onAppear() { print("Top Spacer") }
                
            }
            .onAppear() { print("Top VStack"); print("- - - - - - - - - - -")  }

            VStack {

                VStack {

                    VStack {

                        ForEach(0..<3, id:\..self) { index in
                            
                            Text(index.description)
                                .onAppear() { print(index.description); if (index == 0) { print("Last of second ForEach!!!") } }
                            
                        }
  
                    }
                    .onAppear() { print("Middle VStack Inside DEEP"); print("- - - - - - - - - - -")  }

                }
                .onAppear() { print("Middle VStack Inside"); print("- - - - - - - - - - -")  }

            }
            .onAppear() { print("Middle VStack Outside"); print("- - - - - - - - - - -")  }
            
            
            
            VStack {
                
                Spacer()
                    .onAppear() { print("Bottom Spacer") }
                
                
                ForEach(0..<3, id:\..self) { index in
                    
                    Text(index.description)
                        .onAppear() { print(index.description); if (index == 0) { print("Last of first ForEach!!!") } }
                    
                }

                
                
                
                Text("Bottom text")
                    .onAppear() { print("Bottom Text") }
                
            }
            .onAppear() { print("Bottom VStack"); print("- - - - - - - - - - -")  }
            
            
        }
        .onAppear() { print("ZStack of HierarchyView"); print("- - - - - - - - - - -") }
        
        
    }
 
}

Answer 1

AFAIK，没有通用的方法来判断所有可能的后代视图何时“出现”（即会解雇他们的 onAppear）。

根据您的想法，“出现”与“呈现”不同。一般来说，每个视图决定何时渲染其子视图。例如，LazyVStack 只会在需要渲染时创建它的元素。符合UIViewControllerRepresentable 的自定义视图可以决定为所欲为。

考虑到这一点（假设 render == 出现），您可以采取的一种方法是“跟踪”那些您关心的“出现”视图，并在它们全部出现时触发回调。

您可以创建一个视图修改器来跟踪每个视图“渲染”状态，并使用PreferenceKey 收集所有这些数据：

struct RenderedPreferenceKey: PreferenceKey {
    static var defaultValue: Int = 0
    static func reduce(value: inout Int, nextValue: () -> Int) {
        value = value + nextValue() // sum all those remain to-be-rendered
    }
}

struct MarkRender: ViewModifier {
    @State private var toBeRendered = 1
    func body(content: Content) -> some View {
        content
            .preference(key: RenderedPreferenceKey.self, value: toBeRendered)
            .onAppear { toBeRendered = 0 }
    }
}

然后，在View 上创建便捷方法以简化其使用：

extension View {
    func trackRendering() -> some View {
        self.modifier(MarkRender())
    }

    func onRendered(_ perform: @escaping () -> Void) -> some View {
        self.onPreferenceChange(RenderedPreferenceKey.self) { toBeRendered in
           // invoke the callback only when all tracked have been set to 0,
           // which happens when all of their .onAppear are called
           if toBeRendered == 0 { perform() }
        }
    }
}

用法如下：

VStack {
    ForEach(0..<3, id:\..self) { index in
        Text("\(index)").trackRendering()
    }
}
.onRendered {
    print("Rendered")
}