如何在SwiftUI中利用异步代码创建#Preview预览？

问题分析 #

你遇到的编译错误，核心原因是#Preview的闭包默认是同步执行上下文，不支持直接调用异步属性或函数。要在预览中复用现有异步数据生成逻辑，需要将异步操作放在合法的并发上下文中处理，同时兼顾数据加载的状态展示。

解决方案1：创建异步预览包装视图 #

新增一个临时包装视图，利用SwiftUI的生命周期方法发起异步请求，获取数据后再渲染目标视图：

import SwiftUI
import SwiftData

struct TestUIView: View {
    var passedValue: String
    
    var body: some View {
        Text("passedValue: \(passedValue)")
    }
}

// 用于处理异步数据的预览包装视图
struct AsyncPreviewWrapper: View {
    @State private var asyncValue: String?
    
    var body: some View {
        Group {
            if let value = asyncValue {
                TestUIView(passedValue: value)
            } else {
                ProgressView("加载中...")
            }
        }
        .task {
            // 复用原有异步数据生成函数
            asyncValue = await MyClass.getValueAsync()
        }
    }
}

#Preview {
    AsyncPreviewWrapper()
}

// 保留原有正常预览
#Preview {
    let passedValue = "My value"
    return TestUIView(passedValue: passedValue)
}

#Preview {
    let passedValue = MyClass.getValue()
    return TestUIView(passedValue: passedValue)
}

class MyClass {
    public class func getValue() -> String {
        return "from getValue"
    }
    
    public class func getValueAsync() async -> String {
        return "from getValueAsync"
    }
}

解决方案2：直接在预览闭包中处理异步逻辑 #

如果不想额外创建包装视图，也可以直接在预览闭包内结合@State和Task实现：

#Preview {
    @State var asyncValue: String? = nil
    
    return Group {
        if let value = asyncValue {
            TestUIView(passedValue: value)
        } else {
            ProgressView("加载中...")
        }
    }
    .task {
        asyncValue = await MyClass.getValueAsync()
    }
}

关键细节说明 #

• 使用.task修饰符发起异步任务：它会自动绑定视图生命周期，视图出现时执行任务，消失时自动取消任务，符合SwiftUI的状态管理逻辑。
• 加载状态视图：加入ProgressView可以避免预览在数据未就绪时显示空白，提升预览体验。
• 完全复用原有逻辑：两种方案都直接调用了项目中已有的getValueAsync()，无需为预览单独编写模拟数据。

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