SwiftUIでいこう！-List!

Listを少し深堀します。

【SwiftUI】Listの使い方

簡単に作ります。List {}を使って単純にText()を並べることで実行可能です。

 var body: some View {
   
       List {
           
           Text("apple")
           Text("banana")
           Text("orange")
       }
    }

配列、

fluits = ["apple","banana","orange"]

を使って一括で表を作ります。 ForEach{}を使って

struct ContentView: View {
   
  var fluits = ["apple","banana","orange"]
   
   var body: some View {
   
       List {
               ForEach(0..<fluits.count){ index in
                   Text(self.fluits[index])
               }
               
           }
       }
    }

としても同じことができます。

また、Listの部分を

 List((results,id: \.self){ index in
           Text(index)
 }

としても同じことができます。

配列で"List"を作ってきましたが、"struct"構造体で作った配列を作ってみましょう。

How to create views in a loop using ForEach - a free SwiftUI by Example tutorial

を参考にコードを書いて実行してみます。

まず構造体"struct"。

struct Result{
   var id = UUID()
   var score : Int

配列の変数に入れていきますに

let results = [Result(score: 8), Result(score: 5), Result(score: 10)]

struct ContentView: View {
   let results = [Result(score: 8), Result(score: 5), Result(score: 10)]

　　var body: some View {
   
       List{
           ForEach(results,id: \.id){result in
               Text("Results: \(result.score)")
           }
       }
   }
   
}

　ForEach(results,id: \.id){result in}

をみてみましょう。(results,id: \.id)を注目します。 \.id(structで定義したプロパティ)を指定しています。

単純な配列はどうだっかというと

 List((results,id: \.self){ index in

}

となり、\.selfを指定しています。

通常の配列では\.self、構造体"struct"を使ったものでは\.idという”KeyPath型"で値を取得しています。

KeyPath型については

struct Result: Identifiable {
   var id = UUID()
   var score: Int
}

struct ContentView: View {
   let results = [Result(score: 8), Result(score: 5), Result(score: 10)]

　　var body: some View {
   
       List{
           ForEach(results){result in
               Text("Results: \(result.score)")
           }
       }
   }
   
}

でも同じ結果となります。ポイントはstructでプロトコルIdentifiableに準拠させるとこです。