バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

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

SwiftUI

はじめに

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

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

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

環境

この記事の情報は次のバージョンで動作確認しています。

* MacOS Monterey (12.1)
* Xcode (13.3.1)

基本構文

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("セクション1").font(.largeTitle)
            ) {
                Text("View1")
            }
            
            
            Section (
                header: Text("セクション2").font(.largeTitle)
            ) {
                Text("View2")
            }
        }
    }
}

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

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

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

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

NavigationViewNavigationLinkを使う必要があります。

 NavigationView {

    List {
        ForEach (itemList) { item in

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

}

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

VStackとの使い分け

VStackもViewを並べることができますが、VStackは11個以上の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 全部グレー なし | なし
PlainListStyle

.listStyle(PlainListStyle())
InsetListStyle

.listStyle(InsetListStyle())
GroupedListStyle

.listStyle(GroupedListStyle())
SidebarListStyle(iOS14以上で使用可能)
.listStyle(SidebarListStyle())

おわりに

最後まで見ていただきヘペトナス!

読者登録・Twitterのフォローもお願いします。