iOS - SwiftUI - viewBuilder 中的@State 变量值具有旧值

Question

I am using a LoadingView view to show an activity indicator before data is loaded. The LoadingView receives a @ViewBuilder closure to render the content after the data is loaded.

The @ViewBuilder closure captures a @State variable, but if this state was updated, the @ViewBuilder gets the old value for the state.

An easy code snippet is worth thousand words:

struct PresenterView: View {
    
    enum PresentationMode {
        case small, big
    }
    
    @State private var presentationMode: PresentationMode = .small
    
    var body: some View {
        LoadingView() { message in
            switch self.presentationMode {
            case .small:
                Text("Small presentation of: \(message)")
            case .big:
                Text("Big presentation of: \(message)")
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                print("Presentation mode is changed, before data is loaded")
                self.presentationMode = .big
            }
        }
    }
}


struct LoadingView<Content: View>: View {
    
    @State var loaded = false
    
    let content: (String) -> Content
    init(@ViewBuilder content: @escaping (String) -> Content) {
        self.content = content
    }
    
    var body: some View {
        Group {
            if loaded {
                content("Data")
            }
            else {
                Text("Data is still loading")
            }
        }
        .onAppear() {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                print("Data is loaded")
                self.loaded = true
            }
        }
    }
}

In this example, the presentation mode is changed to .big before the data is loaded. When the @ViewBuilder is rendered, it still uses the initial .small value.

Some findings: If presentation mode is changed to .big after the data is loaded, the @ViewBuilder view gets updated properly. It is my understanding, that internally the @ViewBuilder view does only bind to the state after it has been presented. Still, it should be possible for the @ViewBuilder to get the current value of the state. After all, when the @ViewBuilder is presented, the binding to the state works correctly.

Using an @ObservedObject to wrap the presentationMode works fine, but I would like to avoid this, in order to use @State reliable.

Thanks for the help!

Answer 1

You are not using the content in LoadingView until the data is loaded, so SwiftUI fails to recreate the LoadingView when presentationMode is updated. There are a number of ways to fix this.

Mark content as capturing presentationMode

If you mark the content of LoadingView as capturing presentationMode , then LoadingView will get updated when presentationMode changes.

struct ContentView: View {
    
    enum PresentationMode {
        case small, big
    }
    
    @State private var presentationMode: PresentationMode = .small
    
    var body: some View {
        LoadingView() { [presentationMode] message in
            switch presentationMode {
            case .small:
                Text("Small presentation of: \(message)")
            case .big:
                Text("Big presentation of: \(message)")
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                print("Presentation mode is changed, before data is loaded")
                self.presentationMode = .big
            }
        }
    }
}

---

Use content from the start

Because your LoadingView isn't using the content when presentationMode is changed, SwiftUI fails to recreate the LoadingView so it is stuck with the original value of presentationMode .

If you change your LoadingView to use the content but make it invisible until loaded, then the LoadingView will get updated when presentationMode changes:

var body: some View {
    ZStack {
        content("Data")
            .opacity(loaded ? 1 : 0)
        if !loaded {
            Text("Data is still loading")
        }
    }
    .onAppear() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.loaded = true
        }
    }
}

---

Enable LoadingView to control loaded State

If you only want the real content to be rendered when the data is loaded, you can wrap that content in if loaded { } and pass loaded as a Binding to the LoadingView , and then LoadingView can set loaded = true when the data is loaded, then the PresenterView will reload LoadingView with the real content which will use the latest versions of the @State variables:

struct PresenterView: View {
    
    enum PresentationMode {
        case small, big
    }
    
    @State private var presentationMode: PresentationMode = .small
    @State private var loaded = false
    
    var body: some View {
        LoadingView(loaded: $loaded) { message in
            if loaded {
                let _ = print("presenting now")
                switch self.presentationMode {
                case .small:
                    Text("Small presentation of: \(message)")
                case .big:
                    Text("Big presentation of: \(message)")
                }
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                print("Presentation mode is changed, before data is loaded")
                self.presentationMode = .big
            }
        }
        
    }
}

struct LoadingView<Content: View>: View {
    @Binding var loaded: Bool
    let content: (String) -> Content
    init(loaded: Binding<Bool>, @ViewBuilder content: @escaping (String) -> Content) {
        self._loaded = loaded
        self.content = content
    }
    
    var body: some View {
        ZStack {
            content("Data")
            if !loaded {
                Text("Data is still loading")
            }
        }
        .onAppear() {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                self.loaded = true
            }
        }
    }

}