SwiftUIでアプリ。- リストいろいろ。　１

SwiftUIでList()使う方法の確認です。

一番単純なリストは

  List{
             Text("リスト１")
             Text("リスト２")
             Text("リスト３")
   }

となります。一つ一つの項目をText()で書いていくのは手間もかかるし管理の部分でも効率的ではいです。なのでリストの項目を配列で管理するとfor文なので繰り返しの命令を使えば便利に使えるようになります。

配列dataを作りその中にリストに配置したい文字列を入れます。

var data = ["apple","orange","grape","banana"]

struct ContentView: View {
    var data = ["apple","orange","grape","banana"]  
    var body: some View {
           List(data,id:\.self){value in
                Text(value)    
　   　　　　}
     }
 }

とするとスッキリします。

ForEachを使う方法。

   List{
       ForEach(data, id:\.self){value in
                Text(value)
       }
   }

配列内の要素の項目について構造体structで規定して使うことができます。

struct Fruits:Identifiable {
    let id:UUID = UUID()
    var name: String = ""
}

構造体でIdentifiableに準拠させる。

struct ContentView: View {
    var fruits = [Fruits(name:"apple"),Fruits(name:"orange"),Fruits(name:"banana")]
    
    var body: some View {
        
        List(fruits){value in
            Text(value.name)
        }
    }
}

List()の表記については、"value in"を使う方法

 List(fruits){value in
      Text(value.name)
 }

違う書き方、以下のように書くこともできる

  List(fruits){
      Text($0.name)
  }

見栄えを調整するためのたくさんのモディファイアが用意されています。

アップルのリファレンスを調べてみると、

automatic | Apple Developer Documentation

List(fruits){value in
       Text(value.name)
}
.listStyle(.automatic)

".listStyle() "のカッコの中をいろいろ変えて試すことができます。

リストの中身のカスタマイズは、例えばリストの文字の背景色は

listRowBackground(_:) | Apple Developer Documentation

試しに以下コードを実行してみると、

   List(fruits){value in
            Text(value.name)
                .listRowBackground(Color.orange).listRowSeparatorTint(.blue)
                   
        }
        .listStyle(.automatic)

.listRowBackgroundはリスト内のカスタマイズ、.listStyleはリスト全体のカスタマイズができます。　

参考サイトです。

【Swift UI】List構造体の使い方！見た目や余白のカスタマイズ