SwiftUIのリストの作り方。

セクションを分けて表示する方法。

import SwiftUI

struct ContentView: View {
   var body: some View {
       
       List {
                  Section(header: Text("ヘッダー　項目１")) {
                      Text("設定1")
                      Text("設定2")
                  }
                  Section(header: Text("ヘッダー　項目２")) {
                      Text("設定3")
                  }
              }
   
   }
}

ポイントは

Section(header: Text(見出しに表示したい文字)) { それそれ表示したい文字など項目}

"Section"で項目を分けることを明示してやってます。

次は、単純に配列を利用したリスト。

import SwiftUI

struct LandmarkList: View {

   var arr = ["apple","banana","orange"]
   
   var body: some View {
       NavigationView{
               List{
                   ForEach(arr,id: \.self){section in
                       HStack{
                       Image("turtlerock")
                                  .resizable()
                                  .frame(width: 50, height: 50)
                       Text(section)
                       }
                   }
               
              }
        .navigationBarTitle("Menu")
      }
   }
}

まず表示させたい配列

var arr = ["apple","banana","orange"]

そして

NavigationView{
       List{
                   // コードを書きます。
       }
}

NavigationViewを記述することでタイトルなどリストに必要なものが設置可能となります。

Listを記述することで一覧表の形式へと表示ができるようになります。

そして今回で一番重要なこと

ForEach(arr,id: \.self){section in
　HStack{
　　Image("turtlerock")
　　　.resizable()
　　　.frame(width: 50, height: 50)
　　Text(section)
　}
}

"ForEach(arr,id: \.self)"ですが、arrという配列を一つずつ取り出しsection変数に入れてText(section)で表示させています。

.navigationBarTitle("Menu")

でタイトルをつけます。見た目は

となります。