SwiftUIでToDoリストを作ろー！ 4

引き続き動画を参考に作っていきます。
現状、リストデータは

 @State var words = ["Hello","Good by"]

となっていて、配列のデータを取り出す形にしています。

ToDoリストのデータとして管理するためにデータの雛形、構造体Modelを作っていきます。

struct Model:Identifiable{
    let id = UUID()
    let name:String
    let isComp:Bool
}

let id = UUID()

識別するためプロトコル、"Identifiable"に適合させプロパティとして変数"id"をつくっています。ToDoの完了を管理するために新しく変数 "isComp:Bool" も作ってます。

ContentViewでリストの中身を配列で定義していたものは構造体に合わせた変数に代入します。、

   @State var words:[Model] = [
        Model(name: "Hello", isComp: true),
        Model(name: "Good By", isComp: false)
    ]

構造体に合わせてデータを書き換えます。

リストの個別のデータを管理する ListRowViewで使う時は

 var greet:Model

と変数に読み込み

struct ListRowView: View {
    
    var greet:Model
    
    var body: some View {
            HStack{
                Image(systemName: greet.isComp ? "checkmark.circle" : "circle")
                    .foregroundColor(greet.isComp ? .orange : .red)
                Text(greet.name)
                Spacer()
            }
    }
}

読み込んだ変数の使い方は"greet.isComp"、"greet.name"という感じで"."で繋ぎ、変数に読み込んだModeのプロパティを呼び出して使います。

三項演算子で条件により画像、背景を変えます。

Image(systemName: greet.isComp ? "checkmark.circle" : "circle")
　　　　.foregroundColor(greet.isComp ? .orange : .red)

条件 ? 条件がtrueの場合 : 条件がfalseの場合

のように実行されます。

ContentViewについては

struct ContentView: View {
    
    @State var words:[Model] = [
        Model(name: "Hello", isComp: true),
        Model(name: "Good By", isComp: false)
    ]
    
    var body: some View {
        
        NavigationStack{
            List{ 
                ForEach(words){ word in
               
                    ListRowView(greet: word) 
                }           
            } 
            .navigationTitle("Todo List")
            .navigationBarItems(
                leading: EditButton(),
                trailing: NavigationLink("Add", destination:AddView())
            )
        }
     }    
}

ForEach(words){ word in
　　　ListRowView(greet: word)
}

配列の場合は"id"で定義していましたが、構造体ではidを定義しているので定義なしでForEachが使えます。

リストの構成が"isComp"のtrue,falseで色が変わっているのが確認できます。