如何在SwiftUI（watchOS）中运行时更新View定义？

我有一个独立的watchOS SwiftUI示例应用，目前已实现运行时更新View状态（比如文本内容），但需要进一步实现运行时更新View的布局结构：应用启动时显示初始布局（包含Image和Text的VStack），后台完成用户配置读取后，动态切换为另一种布局（包含两个Text和一个Toggle的VStack）。在UIKit中这类需求很容易实现，但不清楚在SwiftUI声明式框架下该如何操作。

现有实现代码如下：

数据模型与View定义 #

public class MessageViewData: ObservableObject {
    init(_ message: String) {
        self.message = message
    }
    @Published
    public var message: String
}

public struct MessageView: View {
    public init(messageData: MessageViewData) {
        self.messageData = messageData
    }
    @ObservedObject
    var messageData: MessageViewData
    
    public var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text(messageData.message)
        }
        .padding()
    }
}

AppDelegate管理数据源 #

public class AppDelegate: NSObject, WKApplicationDelegate {
    public func applicationDidFinishLaunching() {
        // 模拟后台任务：初始化、读取磁盘等操作
        let queue: DispatchQueue = DispatchQueue.global(qos: .background)
        queue.async {
            var presentDate: Date = Date.now
            print("Start time = \(presentDate)")
            for i in 1...2 {
                Thread.sleep(forTimeInterval: 5)
                presentDate = Date.now
                print("\(i) \(presentDate)")
            }
            print("End time = \(presentDate)")
            
            DispatchQueue.main.async {
                print("Updating Source of Truth...")
                AppDelegate.messageData.message = "Update"
            }
        }
    }
    public static var messageData: MessageViewData = MessageViewData("Default")
}

注入数据到View #

@main
struct WatchOSStartup_Watch_AppApp: App {
    @WKApplicationDelegateAdaptor
    var appDelegate: AppDelegate
    
    var body: some Scene {
        WindowGroup {
            MessageView(messageData: AppDelegate.messageData)
        }
    }
}

SwiftUI是声明式框架，核心思路是用数据源的状态驱动View的渲染分支，而非直接修改View实例。具体实现步骤如下：

1. 扩展数据模型，添加布局状态 #

首先在MessageViewData中新增一个标记布局类型的@Published属性，用枚举明确区分不同布局：

public enum ViewLayoutType {
    case initial // 初始布局
    case configured // 配置后的目标布局
}

public class MessageViewData: ObservableObject {
    init(_ message: String) {
        self.message = message
        self.layoutType = .initial // 默认初始布局
    }
    @Published
    public var message: String
    @Published
    public var layoutType: ViewLayoutType // 新增布局状态
}

2. 修改MessageView，根据布局状态渲染不同结构 #

在MessageView的body中，根据layoutType的状态返回对应的布局：

public struct MessageView: View {
    public init(messageData: MessageViewData) {
        self.messageData = messageData
    }
    @ObservedObject
    var messageData: MessageViewData
    
    public var body: some View {
        Group {
            switch messageData.layoutType {
            case .initial:
                // 初始布局：Image + Text
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text(messageData.message)
                }
            case .configured:
                // 配置后的布局：两个Text + Toggle
                VStack(spacing: 12) {
                    Text("已完成配置")
                    Text(messageData.message)
                    Toggle("启用功能", isOn: .constant(true))
                }
            }
        }
        .padding()
    }
}

3. 更新后台任务的状态修改逻辑 #

在AppDelegate的后台任务完成后，同时更新布局状态和文本内容：

public class AppDelegate: NSObject, WKApplicationDelegate {
    public func applicationDidFinishLaunching() {
        let queue: DispatchQueue = DispatchQueue.global(qos: .background)
        queue.async {
            // 模拟后台操作
            var presentDate: Date = Date.now
            print("Start time = \(presentDate)")
            for i in 1...2 {
                Thread.sleep(forTimeInterval: 5)
                presentDate = Date.now
                print("\(i) \(presentDate)")
            }
            print("End time = \(presentDate)")
            
            DispatchQueue.main.async {
                print("Updating Source of Truth...")
                AppDelegate.messageData.message = "配置完成"
                AppDelegate.messageData.layoutType = .configured // 切换布局状态
            }
        }
    }
    public static var messageData: MessageViewData = MessageViewData("Default")
}

原理说明 #

SwiftUI的View是状态的函数，当@Published属性发生变化时，ObservableObject会发出通知，触发View的body重新计算，从而自动渲染对应的新布局。这种方式完全符合SwiftUI的声明式设计思想，避免了像UIKit那样直接操作View层级的命令式写法。

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