SwiftUI中.onAppear与ViewModifier顺序问题及原因探究

问题现象 #

自定义了一个通过布尔变量isLoaded控制的加载状态ViewModifier（用背景色区分加载/内容状态），模拟延迟3秒的网络请求切换状态。发现两种修饰符顺序表现完全不同：

• 顺序为.onAppear后接.progress时：加载状态无限持续，主视图永远无法显示
• 顺序为.progress后接.onAppear时：一切正常，3秒后自动切换到主视图

代码示例 #

异常版本（加载状态无限持续） #

struct ContentView: View {
    
    @State private var isLoaded = true
    
    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea()
            Text("Example")
                .foregroundStyle(.white)
                .font(.title)
                .bold()
        }
        .onAppear { fakeNetworkCall() }
        .progress(isLoaded: isLoaded)
    }

    
    func fakeNetworkCall() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 3 ) {
            isLoaded = false
        }
    }
}


struct LoadingView: ViewModifier {
    var isLoaded : Bool
    func body(content: Content) -> some View {
        if isLoaded {
            ZStack {
                Color.red
                    .ignoresSafeArea()
                Text("Example")
                    .foregroundStyle(.white)
                    .font(.title)
                    .bold()
            }
        } else {
          content
        }
    }
}


extension View {
    func progress(isLoaded: Bool) -> some View {
        modifier(LoadingView(isLoaded: isLoaded))
    }
}

正常版本（3秒后切换到主视图） #

只需调换修饰符顺序：

var body: some View {
    ZStack {
        Color.blue
            .ignoresSafeArea()
        Text("Example")
            .foregroundStyle(.white)
            .font(.title)
            .bold()
    }
    .progress(isLoaded: isLoaded)
    .onAppear { fakeNetworkCall() }
}

原因分析 #

核心在于SwiftUI修饰符的顺序决定了视图层级和.onAppear的触发条件：

异常版本的逻辑漏洞 #

SwiftUI的修饰符链式调用是从后往前包装视图，异常版本的实际视图结构是：progress修饰符包裹了带有.onAppear的ZStack视图。

初始isLoaded = true时，LoadingView会直接返回自己的红色加载视图，完全忽略传入的content（也就是带.onAppear的ZStack）——这意味着原ZStack视图根本不会被渲染到屏幕上，它的.onAppear自然不会触发。

没有触发.onAppear，fakeNetworkCall就不会执行，isLoaded一直保持true，加载状态也就无限持续了。

正常版本的正确逻辑 #

调换顺序后，.onAppear是附着在progress修饰符生成的顶层视图上的。

无论progress返回的是加载视图还是内容视图，只要这个顶层视图出现在屏幕上，.onAppear就会触发，进而执行fakeNetworkCall。3秒后isLoaded变为false，LoadingView切换到显示原ZStack内容，流程正常。

总结 #

.onAppear的触发前提是它所附着的视图节点被渲染。在自定义ViewModifier会替换视图的场景下，必须确保.onAppear附着在一定会被渲染的顶层视图上，而不是可能被替换掉的底层视图。

内容的提问来源于stack exchange，提问作者Anton