見出し画像

SwiftUI-Listを使おう!

通常

var body: some View{}の中にText()を入れるだけ。たったこれだけ。

 var body: some View {
        List{
            Text("月曜日")
            Text("火曜日")
            Text("水曜日")
            Text("木曜日")
            Text("金曜日")
            Text("土曜日")
            Text("日曜日")
        }
    }

実行すると

配列を使う

Text()を使って表示できますが、一つずつ指定して書かないといけません。これをまとめて一気にやってしまえるのが配列を使った方法です。

配列を定義します。

 var weekDays = ["月曜日","火曜日","水曜日","木曜日","金曜日","土曜日","日曜日"]

リストのループで連続処理します。

  
    
    var body: some View {
        List(0..<weekDays.count){i in
            Text(weekDays[i])
      
        }
    }

最初のText()と同じように表示されます。

ループの書き方は

 List{
    ForEach(0..<weekDays.count){ i in
                Text(weekDays[i])
    }
 }

と書くこともできます。

構造体で定義したもの

struct Week:Identifiable{
    let id = UUID()
    let name:String
}

こんな感じで構造体を定義して配列を作る必要がある場合があります。

Json、CSVなどファイルを取り込む場合は構造体で定義してやり値を使えるようにする必要があります。今回は"Identifiable"ですがJsonの場合は"Codable"に準拠させる必要があります。

使う配列は

  var weekDays = [
        Week(name:"月曜日"),
        Week(name:"火曜日"),
        Week(name:"水曜日"),
        Week(name:"木曜日"),
        Week(name:"金曜日"),
        Week(name:"土曜日"),
        Week(name:"日曜日")
    ]

こんな感じになります。読み込みは

  List{
         ForEach(weekDays){weekday in
             Text(weekday.name)
        }
  }

とシンプルに書けます。

ちょっと良さげにしてみまよう。NavigationViewをつけてタイトルをつけてみます。

   NavigationView{
            List{
                ForEach(weekDays){weekday in
                    Text(weekday.name)
                }
                .navigationTitle("WeekDays")
            }
        }


この記事が気に入ったらサポートをしてみませんか?