List

一列に並べられたデータの行(リスト)を表示します

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

実行画面です。

右側のプレビュー画面にすぐ表示されます。縦に並んで表示されます。　VStackでも縦に並べることはできますが、List()では罫線が引かれ余白、背景などがつきます。あとはデータ管理方法が用意されていて便利に使えます。

繰り返し同じ形式のものを並べるときには配列に入れたデータが利用できます。

TabView

表示画面を3面作っておいて一つ表示させます。必要な画面を切り替えて使うことができるタブ表示のコードです。

struct ContentView: View {
    var body: some View {
        TabView {
            Text("1")
                .tabItem {
                    Label("Received", systemImage: "tray.and.arrow.down.fill")
                }
            Text("2")
                .tabItem {
                    Label("Sent", systemImage: "tray.and.arrow.up.fill")
                }
            Text("3")
                .tabItem {
                    Label("Account", systemImage: "person.crop.circle.fill")
                }
        }

    }
}

基本形は

今回の場合は内容をText()、タブのラベルをSF Symbolsで作ってあります。Label()については以下のようになっています。

実行画面です。

Tables

テーブルに入れるデータ型を決めて(構造体)、それに対する対象データを配列に入て表示する準備です。少し準備が必要です。

まず型を決めて、

struct User: Identifiable {
　　let id: Int
　　var name: String
　　var score: Int
}

データを作っていきます。構造体の中にデータを入れたものを配列にします。

    @State private var users = [
        User(id: 1, name: "Taylor Swift", score: 95),
        User(id: 2, name: "Justin Bieber", score: 80),
        User(id: 3, name: "Adele Adkins", score: 85)
    ]

あとはこのデータを利用して表示させる命令です。

 var body: some View {
        Table(users) {
            TableColumn("Name", value: \.name)
            TableColumn("Score") { user in
                Text(String(user.score))
            }
        }
  }

基本形は

実行画面です。

プレビューの画面は少し横に広げないとテーブル表示にはなりません。広げないと普通のリスト表示になります。