【Xcode/SwiftUI】リストを簡単に作ってみた

今回はSwiftUIでリストを実装してみました。

Storyboardよりも簡単且つシンプルに実装出来るのでぜひ覚えておきましょう！

Contents 非表示

開発環境
プロジェクトの作成、リストの作成
色々なリストの表示方法の紹介
まとめ

開発環境

今回は以下の環境で実装しています

Mac OS	12.4
Swift ver	5.6
Xcode ver	13.3

プロジェクトの作成、リストの作成

まずはSwiftUIを選択してプロジェクトを作成して下さい。

まずはシンプルなリストを作ってみましょう、以下コードをコピペしてください。

struct ContentView: View {
    var body: some View {
        List {
            Text("大根")
            Text("キャベツ")
            Text("じゃがいも")
        }
    }
}

わずか10秒足らずでリストを作成できました、中々凄いことですね(Storyboardで同じ画面を作ろうとなっても10秒ではとても無理です)

このようにSwift UIではシンプルなコードで実用的な機能を実装することが出来ます、それでは次のセクションでは色々なタイプのリストをご紹介します。

色々なリストの表示方法の紹介

動的リスト

struct ContentView: View {
    let fruits = ["りんご", "オレンジ", "バナナ"]
    var body: some View {
        List {
            ForEach(0 ..< fruits.count) { index in
                Text(fruits[index])
            }
        }
    }
}

グループ化

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("大谷翔平")
                Text("イチロー")
                Text("松坂大輔")
            } header: {
                Text("野球")
            }
            Section {
                Text("本田圭佑")
                Text("ロナウジーニョ")
                Text("吉田麻也")
            } header: {
                Text("サッカー")
            }
        }
    }
}