SwiftUI中@State与@Binding的使用及预览报错解决

问题场景 #

学习SwiftUI的@State与@Binding时，尝试将Model存储在视图外部，让控件（比如“up!!”按钮）具备更新Model的能力，但编写预览时遇到报错：

Cannot convert value of type 'Model' to specified type 'Binding<Model>'

解决方案 #

经指导，使用@Previewable @State可以解决该问题，完整代码示例如下：

App入口代码 #

import SwiftUI

@main
struct BinnderApp: App {
    @State private var appModel: Model = Model(value: 42)
    
    var body: some Scene {
        WindowGroup {
            ContentView(myModel: $appModel)
        }
    }
}

struct Model {
    var value: Int
    
    mutating func increment() {
        value += 1
    }
}

视图与预览代码 #

import SwiftUI

struct ContentView: View {
    @Binding var myModel: Model
    
    var body: some View {
        VStack {
            Button("up!!") {
                myModel.increment()
            }
            Text("the value is \(myModel.value)")
        }
    }
}

#Preview {
    // 原错误写法：直接给@Binding赋值实例，导致类型不匹配
    // @Binding var myModel: Model = Model(value: 0)
    
    // 正确写法：用@Previewable @State创建数据源，再通过绑定传递
    @Previewable @State var myModel: Model = Model(value: 0)
    ContentView(myModel: $myModel)
}

原理说明 #

• @State用于声明数据的原始存储位置，负责管理数据的生命周期和变化
• @Binding是对外部数据源的引用，让视图拥有对该数据的读写权限，但本身不持有数据
• 预览的逻辑和App入口一致：必须先创建@State类型的Model作为原始数据源，再通过$符号将绑定传递给ContentView的@Binding参数

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