iOS App Dev Tutorialsを読んで実際にやってみた。その4

前回の記事

iOS App Dev Tutorialsを読んでみた。その3
前回の記事を読んだ後、この記事をご覧ください。

今回の範囲

Displaying data in a list
４回目はリストにデータを表示させる。

内容の要約

1. デイリー スクラムのリストを表示させる。

• ScrumsView.swiftという新しいSwiftUI Viewファイル作成します。
• scrumstypeという定数を追加する。

ScrumsView.swift

let scrums: [DailyScrum]

• Daily Scrumを初期値にする。。

ScrumsView.swift

ScrumsView(scrums: DailyScrum.sampleData)

• bodyの中のtextをListに書き換える。

ScrumsView.swift

var body: some View {
    List {
        
    }
}

• 命令文forEachを使ってビューを追加する。

ScrumsView.swift

ForEach(scrums, id: \.title) { scrum in
    
}

• リストの背景色を設定する。

ScrumsView.swift

.listRowBackground(scrum.theme.mainColor)

2.各スクラムを識別可能にする。

• ScrumdingerApp.swiftのファイルを開いて、構造体DailyScrum.swiftIdentifiableを宣言する。

ScrumdingerApp.swift

struct DailyScrum: Identifiable

• UUIDという定数を追加する。

ScrumdingerApp.swift

 let id: UUID

• 初期化処理を追加する。

ScrumdingerApp.swift

init(id: UUID = UUID(), title: String, attendees: [String], lengthInMinutes: Int, theme: Theme) {
        self.id = id
        self.title = title
        self.attendees = attendees
        self.lengthInMinutes = lengthInMinutes
        self.theme = theme

• For Eachで繰り返し文を作る。

ScrumdingerApp.swift

ForEach(scrums) { scrum in

• アプリの初期ビューに設定する。

ScrumdingerApp.swift

ScrumsView(scrums: DailyScrum.sampleData)

３.まとめ

　今回はリストでのデータの表示を行った。次回はナビゲーション階層を設定します。