【SwiftUI】Listを用いた簡単なリスト表示について解説！

2025年1月22日

ほりうち

こんにちは！Shoriと申します。この記事では、Swift 5.10およびXcode 15.4を使用して、SwiftUIでtoggle()を使用して値を切り替える方法について、サンプルコードを交えながら説明しております。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・ListとSectionを使い方
・ListとSectionにheaderを設定する
・ListとSectionの使い方（ForEachを組み合わせる方法）

実行環境

・実行環境：SwiftUI+XCode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：2024年12月30日（月）

※ 今回紹介するtoggle()は、iOS13.0+, macOS10.15+以上で動作しますので、それ未満の場合はOSのアップデートが必要な場合があります。

Listとは？

@MainActor @preconcurrency
struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View

Listとはデータを各行に格納するコンテナを提供するViewです。

ListとSectionの使い方

概要

Listは、SectionというWidgetを使うことで行データを作成できます。

サンプルコード

import SwiftUI

struct BlogView: View {
    var body: some View {        
        List {
            Section {
                Text("ID: OOOOOO")
                Text("UserName: Hoge")
            }
        }
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: BlogViewという構造体を定義する。
◾️行 4: Listを宣言します。
◾️行 5-6: カラム行を設定します。Sectionを配置することで各行のデータを設定できます。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

出力

ListとSectionにheaderを組み合わせる方法

概要

ListのSectionにheaderをセットすることができます。

サンプルコード

import SwiftUI

struct BlogView: View {
    var body: some View {
        List {
            Section {
                Text("お問い合わせ")
                Text("退会")
            } header: {
                Text("困ったときは")
            }
        }
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: BlogViewという構造体を定義する。
◾️行 4: Listを宣言します。
◾️行 5-6: カラム行を設定します。Sectionを配置することで各行のデータを設定できます。
◾️行 7-9: ヘッダーを設定します。headerを宣言してその中にタイトルとして使うためのTextを定義します。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

出力

ListとSectionにForEachを組み合わせる

概要

ListのSectionはForEachを使って生成することができます。

サンプルコード

import SwiftUI

struct BlogView: View {
    let optionRows = ["ログアウトする", "マイページの設定", "バイブレーションの設定"]
    
    var body: some View {
        List {
            Section {
                ForEach(optionRows, id: \.self) { option in
                    Text(option)
                }
            } header: {
                Text("ユーザーメニュー")
            }
        }
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: BlogViewという構造体を定義する。
◾️行 3-4: OptionRowsという配列を定義し、行データの中身を宣言します。
◾️行 7: Listを宣言します。
◾️行 8: Sectionを宣言します。
◾️行 9: ForEachを宣言します。第一引数にOptionRowsを指定し、第二引数にOptionRowsの各アイテムを識別するためのidを自動で割り振るためのid: \.selfを書きます。
◾️行 10: optionを表示するTextを宣言します。
◾️行 12: セクションヘッダーを宣言します。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。