SwiftUI 如何使用异步代码创建#预览

问题描述

我想要创建一个使用使用异步/等待计算的一些值的#预览。

下面是一个样例代码，前两个预览正常工作。最后一个调用异步函数失败。

import SwiftUI
import SwiftData

struct TestUIView: View {

    var passedValue:String

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


#Preview {
    let passedValue="My value"
    return TestUIView(passedValue: passedValue)
}

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

#Preview {
    var passedValue:String {
        get async {
            return await MyClass.getValueAsync()
        }
    }
    return TestUIView(passedValue: passedValue)
}



class MyClass {

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

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

预览错误为： 编译失败：’async’ 属性在不支持并发性的函数中进行访问

在真实应用中，传递的数据是在异步模式下创建的，并且一旦可用就传递给下一个视图。我希望能够在预览中使用创建此数据的相同函数，而不是仅为#Preview 创建一些虚拟数据。

解决方案

解决此预览宏问题的方法与解决其他问题（如使用 @State 变量）的方法相同：在宏中创建一个视图结构。

#Preview("from getValueAsync") {

    struct AsyncTestView: View {

        @State var passedValue: String = ""

        var body: some View {
            TestUIView(passedValue: passedValue)
                .task {
                    passedValue = await MyClass.getValueAsync()
                }
        }
    }

    return AsyncTestView()
}

你也可以在预览之外创建它，但在创建发布时，存档将不会删除代码。另外，如果你正在使用多个宏，给它们命名会很有帮助。