【SwiftUI】NavigationStackによるリスト一覧表示

まえがき

この記事はSwift独学者による備忘録です。
万が一誤った記載がある場合は、コメントでご指摘いただけると幸いですm(_ _)m

確認環境

XCode Version 15.4
MacOS Sonoma 14.4.1

Swiftでのリスト表示

コーディングの練習中に基本的なリストが作成できたので、備忘録として残します。

Identifiableというプロトコルを用いてリストに一意のID(UUID)を持たせ、Listを表示しています。
destination:でリストを押したときの遷移先Viewを指定しています。

遷移先ViewではVStackを使用して要素を縦並びに表示させています。

コード例

うちの歴代猫ちゃんたちをリストにしてみました。

ファイル名.swift

import SwiftUI

struct Cat: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
    var personality: String
}

struct ContentView: View {
    
    let cats: [Cat] = [
        Cat(name: "たろう", age: 24, personality: "おっとりさん"),
        Cat(name: "こむぎ", age: 13, personality: "かわいいメンヘラ"),
        Cat(name: "ひなり", age: 14, personality: "母性爆発"),
        Cat(name: "ぐり", age: 10, personality: "食いしん坊甘えん坊"),
        Cat(name: "つぶ", age: 13, personality: "健気な美少女"),
        Cat(name: "うに", age: 7, personality: "ツンデレ末っ子")
    ]
    
    var body: some View {
        NavigationStack {
            List(cats) { cat in
                NavigationLink(cat.name, destination: DetailView(cat: cat))
            }
            .navigationTitle("うちの猫たち🐈")
        }
    }
}

struct DetailView: View {
    var cat: Cat

    var body: some View {
        VStack(alignment: .leading) {
            Text("名前: \(cat.name)")
                .font(.title)
                .fontWeight(.bold)
            Text("年齢: \(cat.age)歳")
                .font(.title)
            Text("性格: \(cat.personality)")
                .font(.title)
        }
        .navigationTitle(cat.name)
    }
}

リスト一覧

たろう	こむぎ	ひなり
ぐり	つぶ	うに

あとがき

今回はコードの備忘録のみですが、捕捉事項があれば随時更新していきます。