MENU

【SwiftUI】Listの使い方を解説

記事内に商品プロモーションが含まれる場合があります

Listビューは、データのリストを表示するためのViewです。

目次

Listビューの使い方

List {
    子View1
    子View2
    子View3
    ・・・
}

単純にListの中にViewを列挙していくだけで、一覧を表示することができます。

struct ContentView: View {
    var body: some View {
        List {
            Text("りんご")
            Text("バナナ")
            Text("みかん")
            Text("メロン")
            Text("さくらんぼ")
        }
    }
}

配列データをListに入れて表示する場合

データベースから取得したデータの一覧などをListに並べたい次のようにForEachを使います。

struct ContentView: View {
    // Listに入れるデータ一覧
    let fruits = ["りんご", "オレンジ", "バナナ"]
    
    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
    }
}

ForEachを使わずに表現することも可能

List 自体が ForEach を内部で使用しているので、次のように書くこともできます。

struct ContentView: View {
    let fruits = ["りんご", "オレンジ", "バナナ"]
    
    var body: some View {
        List(fruits, id: \.self) { fruit in
            Text(fruit)
        }
    }
}

NavigationLinkをつける

必要に応じて、リスト内の要素をタップしたときのアクションや、詳細画面へのナビゲーションなどを追加できます。

struct ContentView: View {
    let fruits = ["りんご", "オレンジ", "バナナ", "メロン", "もも"]
    
    var body: some View {
        NavigationStack {
            List(fruits, id: \.self) { fruit in
                NavigationLink(destination: Text("\(fruit)の詳細")) {
                    HStack {
                        Text(fruit)
                        Spacer()
                    }
                }
            }
            .navigationTitle("果物リスト")
        }
    }
}

Listの表示設定

List は、さまざまな表示スタイルをカスタマイズするためのモディファイアを提供しています。以下は、よく使用される List の表示スタイルのモディファイアについての解説です。

.listStyle(GroupedListStyle()):

GroupedListStyle は、iOSの標準的なグループ化されたリストスタイルを提供します。

セクションごとにグループ分けされ、各セクションにはヘッダーやフッターが含まれます。

struct ContentView: View {
    let items = [
        ("果物", ["りんご", "バナナ"]),
        ("野菜", ["にんじん", "キャベツ"]),
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.0) { group, groupItems in
                    Section(header: Text(group)) {
                        ForEach(groupItems, id: \.self) { item in
                            Text(item)
                        }
                    }
                }
            }
            .listStyle(GroupedListStyle())
            .navigationTitle("GroupedListStyleの例")
        }
    }
}

.listStyle(PlainListStyle()):

PlainListStyle は、グループ化されずに単純なリストスタイルを提供します。セクションがなく、全体が一つのリストとして表示されます。

以下の例では、他のリストスタイルとデザインの比較がしやすいようにあえてSectionビューを使っていますが、PlainListStyleを使う場合、本来は使用しません。

struct ContentView: View {
    let items = [
        ("果物", ["りんご", "バナナ"]),
        ("野菜", ["にんじん", "キャベツ"]),
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.0) { group, groupItems in
                    Section(header: Text(group)) {
                        ForEach(groupItems, id: \.self) { item in
                            Text(item)
                        }
                    }
                }
            }
            .listStyle(PlainListStyle())
            .navigationTitle("PlainListStyleの例")
        }
    }
}

.listStyle(InsetGroupedListStyle()):

InsetGroupedListStyle は、視覚的な観点で言うとGroupedListStyleに余白が追加されたものです。

struct ContentView: View {
    let items = [
        ("果物", ["りんご", "バナナ"]),
        ("野菜", ["にんじん", "キャベツ"]),
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items, id: \.0) { group, groupItems in
                    Section(header: Text(group)) {
                        ForEach(groupItems, id: \.self) { item in
                            Text(item)
                        }
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("InsetGroupedListStyleの例")
        }
    }
}

関連記事

SwiftUIが学べる書籍

Share
  • URLをコピーしました!

Comment

コメントする

目次