SwiftUI卡牌属性展示App报错求助：四类编译问题排查

错误根源分析 #

你遇到的四类编译错误，核心原因集中在两点：

1. 属性拼写错误：Card结构体中类型属性拼写为tpye，但ContentView中调用的是card.type，编译器无法匹配属性，进而误判类型引发绑定相关错误；
2. 可选类型未处理：atk和def是可选Int类型，不能直接传入Text初始化器，必须转换为字符串并处理nil值。

修复步骤及完整代码 #

1. 修正Card结构体属性拼写

将tpye改为type，确保属性名统一：

import Foundation

struct Card: Hashable, Identifiable, Codable {
    var id = UUID()
    var cardName: String
    var level: Int?
    var type: String // 修正拼写错误
    var atk: Int?
    var def: Int?
}

2. 同步修正ViewModel中的初始化代码

更新卡牌初始化时的参数名，匹配修正后的属性：

import Foundation
import SwiftUI

extension ContentView {
    @MainActor class CardViewModel: ObservableObject {
        @Published var cards: [Card] = [
            Card(cardName:"Obelisk", level: 10, type: "Divine", atk: 4000, def: 4000),
            Card(cardName: "Slifer", level: 10, type: "Divine", atk: nil, def: nil ),
            Card(cardName: "F.A. Dawn Dragster", level: 7, type: "Light", atk: 0, def: 2000),
            Card(cardName: "Timestar Magician", level: 4, type: "Dark", atk: 2400, def: 1200)
        ]
    }
}

3. 修复ContentView中的文本展示逻辑

处理可选Int类型的转换，同时修正属性调用：

import SwiftUI

struct ContentView: View {

    @StateObject private var viewModel = CardViewModel()
    
    var body: some View {
        NavigationView{
            ScrollView{
                // 因Card遵循Identifiable协议，可省略id参数
                ForEach(viewModel.cards) { card in 
                    HStack {
                        Image(card.cardName)
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(90)
                            .padding(.horizontal)
                        
                        Spacer()
                        
                        VStack(alignment: .trailing){ 
                            Text(card.cardName)
                            Text(card.type) // 调用修正后的属性名
                            // 处理nil值，显示"—"替代空值
                            Text(card.atk.map { "\($0)" } ?? "—")
                            Text(card.def.map { "\($0)" } ?? "—")
                        }
                    }
                    .frame(height: 80)
                }
            }
            .navigationTitle("Yu-Gi-Oh!")
        }
        .navigationViewStyle(.stack)
    }
}

修复效果 #

应用可正常编译运行，通过ViewModel的@Published属性自动响应数据变化，所有卡牌的名称、类型、攻击力、防御力（nil值显示为"—"）将正确展示在滚动列表中。

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