How can I be sure that a View did completely rendered until last line of code in SwiftUI?

user_13899957 0
Viewed 818

I have some code that they must get fired after the View get completely rendered and drawn, as we know we got onAppear or onChange for a View, they can be useful to know wether the View has been appear or is under change, but they are not useful to be sure that the View has been 100% rendered, for example if we got ForEach, List or Form in the View, you could see the View but because of hierarchy could still ForEach working on View, so that means the View did not completely loaded, it could be get more noticeable if you gave an animation modifier then you could see it as well, So my goal is know how I can be 100% sure my View get rendered with everything inside and it would be no more line code to run for rendering the View?

thanks for reading and helping

Example:

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("- - - - - - - - - - -") }
        
        
    }
 
}
swiftui
1 Answers

There's no general way, AFAIK, to tell when all possible descendant views have "appeared" (i.e. would have fired their onAppear).

Depending on how you think about it, "appeared" is different than "rendered". Generally speaking, each view decides when it renders its children. For example, LazyVStack will only create its elements when they need to be rendered. A custom view conforming to UIViewControllerRepresentable could decide to do whatever it wants.

With that in mind (assuming render == appear), an approach you could take is to "track" those views that you care about having "appeared", and fire a callback when they all did.

You could create a view modifier to keep track of each view "render" status, and use PreferenceKey to collect all this data:

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

Then, create convenience methods on View to simplify its usage:

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() }
        }
    }
}

Usage would be:

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