【SwiftUI】Listの基本的な使い方 (Viewを並べる時に使います)

Xcode (13.3.1)

はじめに
基本構文
ヘッダーとフッターを表示
リスト内のアイテムをタップを検知する方法
リスト内のアイテムをタップしたら画面遷移させる
VStackとの使い分け
listStyleで見た目を変えられる
おわりに

はじめに

今日はSwiftUIのViewについて勉強していきます。

ListはViewを並べるためのViewです。

今回はListViewの基本的な使い方とVStackとの使い分けについて共有したいと思います。

基本構文

List {
    ForEach (配列変数) { item in
        ビュー()
     }
}

ForEachじゃないとダメってことではないですが、一般的な使い方として繰り返し構文で同じViewを生成して使います。

ヘッダーとフッターを表示

Listの直下にSectionというViewを挟むとヘッダーとフッターを表示するといったことができます。

struct ContentView: View {
    var body: some View {
        List{
            
            Section (
                header: Text("リストの上に文字").foregroundColor(Color.black),
                footer: Text("リストの下に文字").foregroundColor(Color.black)) {
            
                Text("1")
                Text("2")
                Text("3")
                Text("4")
                Text("5")
                Text("6")
                Text("7")
                Text("8")
                Text("9")
                Text("10")
                }
        }
    }
}

注意点としては今まで子ViewをListで囲んでいましたが、Sectionで囲むようにしないといけないです。

Listは複数のSectionを持つこともできます。

struct ContentView: View {
    var body: some View {
        List{
            
            Section (
                header: Text("セクション１").font(.largeTitle)
            ) {
                Text("View1")
            }
            
            
            Section (
                header: Text("セクション２").font(.largeTitle)
            ) {
                Text("View2")
            }
        }
    }
}

リスト内のアイテムをタップを検知する方法

.onTapGestureモディファイアを使うとできます。

List {
    ForEach (itemLiist) { item in
        RowView()
            .onTapGesture {
                // タップ時の処理
            }
    }
                   
}

リスト内のアイテムをタップしたら画面遷移させる

NavigationViewとNavigationLinkを使う必要があります。

 NavigationView {

    List {
        ForEach (itemList) { item in

            // SomeViewは遷移先の画面
            NavigationLink(destination: SomeView()) {
                                
                // １行分のViewでViewの範囲をタップすると遷移
                RowView(data: item)
            }
        }
    }

}

NavigationViewはbodyの直下がいいと思います。

VStackとの使い分け

VStackもViewを並べることができますが、VStackは１１個以上のViewを並べるとエラーが出ます。

大量のViewを並べるのに適していないということなんでしょうかね。

listStyleで見た目を変えられる

何も書かない場合はiOS15だとこんな感じになります。

listStyleモディファイアを使うと見た目を変えることができます。

        List {
            ForEach (0..<5) { i in
                RowView(str: "Item_\(i+1)")
            }
        }
        .listStyle(DefaultListStyle())  // ここを変える

デフォルトはDefaultListStyleが設定されております。

DefaultListStyleはOSバージョンによってスタイルのようです。

他にも何種類かスタイルが用意されているのお好みをやつを使いましょう。

スタイル名	背景色	余白
PlainListStyle	全部白	なし
InsetListStyle	全部白	左側に余白
GroupedListStyle	背景はグレー、アイテムは白	上下に余白
SidebarListStyle	全部グレー	なし \| なし