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

リストの表示方法についてスッキリさせていきます。

struct ListRowView: View {
    
    var greet:String
    
    var body: some View {
            HStack{
                Image(systemName: "checkmark.circle")  
                Text(greet)                
            }
    }
}

var greet:String

変数を作り、 Text(greet)という感じで書いてやります。

struct ContentView: View {
    
    var body: some View {
        
        NavigationStack{
            List{
                ListRowView(greet: "Hello")
                
            } .navigationTitle("Todo List")
        }    
  }

表示は

となります。複数のデータを複数の行に表示させたい場合は

NavigationStack{
         List{
                        ListRowView(greet: "Hello")
　　　　　　 ListRowView(greet: "Good by")
        } .navigationTitle("Todo List")
}

と構造体 ListRowView()を複数書いてやります。実行すると

と表示されます。この方法だと

    ListRowView(greet: "Hello")
　 ListRowView(greet: "Good by")

という感じに何回も同じことを書かないと行けません。スッキリと書きたいので"ForEach"を使います。

ListRowView(greet: "Good by")の中で変化があるのが"Hello"と"Good by"なのでこれを変数に置き換えることを考えます。

変数を作ります。

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

あとは ForEach(words,id: \.self){}の構文に合わすだけです。

ForEach(words, id: \.self){ word in
　　　　　ListRowView(greet: word)
}

struct ContentView: View {
    
    @State var words = ["Hello","Good by"]
    
    var body: some View {
        
        NavigationStack{
            List{ 
                ForEach(words,id: \.self){ word in
                    ListRowView(greet: word) 
                }           
            } .navigationTitle("Todo List")
        }
     }    
  
}

これで配列でリストに表示したい文言を入れておくと順番に取り出してListRowView()に取り込み表示してくれます。最初にListRowView()を縦に並べて表示させた場合と同じ表示になります。

メモ

ForEachで取り出す場合ですが構造体でモデル定義したデータを使う配列では id: \.selfは必要ありません。上記のものは単純なデータの配列なので　　id: \.selfが必要になっていますはければエラーとなります。