前文

昨天實作完新增跟刪除之後，我們之後要使用Chart這個框架來搭配SwiftData，所以我們今天要重新設計一個資料模型。

Model

這邊是資料表的內容，今天的範例是設計用來儲存和管理食物相關資訊的資料結構。看到下面有個 enum 他遵循 CaseIterable 的協議，這個協議可以把這個 enum 當成一個 array 來做訪問。

@Model
class DataModel {

    var style: Style.RawValue
    
    var name: String

    var quantity: Int

    var calories: Int

    init(
        name: String,
        quantity: Int,
        calories: Int,
        style: Style
    ) {
        self.name = name
        self.quantity = quantity
        self.calories = calories
        self.style = style.rawValue
    }
    
    enum Style: String, CaseIterable {
        case fruit = "Fruit"
        case vegetable = "Vegetable"
        case snack = "Snack"
    }
}

先給假資料

這邊先包一個 NavigationStack，然後再出現的時候判斷資料庫裡面有沒有資料，如果沒有的話就把假資料新增到資料庫裡面。

struct ContentView: View {
    
    @Environment(\.modelContext) private var modelContext
    @Query private var datas: [DataModel]

    var body: some View {
        NavigationStack {
            List {
                ForEach(datas) { data in
                    Text(data.name)
                }
            }
        }
        .onAppear {
            if datas.isEmpty {
                initData()
            }
        }
    }
}

extension ContentView {
    
    func initData() {
        
        let data1 = DataModel(name: "Apple", quantity: 100, calories: 52, style: .fruit)
        let data2 = DataModel(name: "Banana", quantity: 100, calories: 89, style: .fruit)
        
        let data3 = DataModel(name: "Carrot", quantity: 100, calories: 41, style: .vegetable)
        let data4 = DataModel(name: "Broccoli", quantity: 100, calories: 34, style: .vegetable)
        
        let data5 = DataModel(name: "Potato Chips", quantity: 50, calories: 536, style: .snack)
        let data6 = DataModel(name: "Chocolate", quantity: 50, calories: 546, style: .snack)
        
        let dataModels: [DataModel] = [data1, data2, data3, data4, data5, data6]
        
        dataModels.forEach { data in
            modelContext.insert(data)
        }
    }
}

Picker

接下來我們將 NavigationStack 裡的程式碼改成以下，這樣點擊的時候就可以挑選食物的類型。

Picker("", selection: $style) {
    ForEach(DataModel.Style.allCases, id: \.self) { style in
        Text(style.rawValue)
            .tag(style.rawValue)
    }
}
.buttonStyle(.bordered)