Tweet

Pocket

Develop Apps for iOSをやってみる 〜その3〜

はじめに

DX推進室の野上です。
前回 の続きです

どこから？

今回はここから続けます。

最初に

今回も用意されたプロジェクトファイルがあります。

が、その2と同じように無視します（ホントはダメ）

データをリスト表示する

Daily Scrumsのデータをリスト表示する

新しいファイル ScrumsView.swiftを追加します。
中身は以下のようなHello Worldを表示する内容にしておきます。

import SwiftUI

struct ScrumsView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        ScrumsView()
    }
}

DailyScrumのデータをリスト表示します。
listRowBackgroundでリストのRowの背景色を指定していますが、
これはプロジェクトに無いデータですので、反映されません。
気になる人は、この章の最初のプロジェクトダウンロードからやり直してください。

import SwiftUI

struct ScrumsView: View {
    let scrums: [DailyScrum]
    
    var body: some View {
        List {
            ForEach(scrums, id: \.title) { scrum in
                CardView(scrum: scrum)
                    .listRowBackground(scrum.color)
            }
        }
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        ScrumsView(scrums: DailyScrum.data)
    }
}

ここまでで以下のような画面になっているはずです。

※本当は背景色がつきます

ScrumsデータにIDを振る

前のセクションまでは、Scrumのタイトルで識別していましたが、それでは同じタイトルのScrumを作れないのでIDを振るようにしましょう。

ModelのDailyScrumクラスをIdentifiableにして、初期化処理(init)で値を保持しましょう。
DailyScrumクラスを以下のように変更します。

import SwiftUI

struct DailyScrum: Identifiable {
    let id: UUID
    var title: String
    var attendees: [String]
    var lengthInMinutes: Int
    var color: Color
    
    init(id: UUID = UUID(), title: String, attendees: [String], lengthInMinutes: Int, color: Color) {
        self.id = id
        self.title = title
        self.attendees = attendees
        self.lengthInMinutes = lengthInMinutes
        self.color = color
    }
}

extension DailyScrum {
    static var data: [DailyScrum] {
        [
            DailyScrum(title: "Design", attendees: ["Cathy", "Daisy", "Simon", "Jonathan"], lengthInMinutes: 10, color: Color("Design")),
            DailyScrum(title: "App Dev", attendees: ["Katie", "Gray", "Euna", "Luis", "Darla"], lengthInMinutes: 5, color: Color("App Dev")),
            DailyScrum(title: "Web Dev", attendees: ["Chella", "Chris", "Christina", "Eden", "Karla", "Lindsey", "Aga", "Chad", "Jenn", "Sarah"], lengthInMinutes: 1, color: Color("Web Dev"))
        ]
    }
}

ScrumsViewのForEachでidを設定している部分を削除します。

import SwiftUI

struct ScrumsView: View {
    let scrums: [DailyScrum]
    
    var body: some View {
        List {
            ForEach(scrums) { scrum in
                CardView(scrum: scrum)
                    .listRowBackground(scrum.color)
            }
        }
    }
}

struct ScrumsView_Previews: PreviewProvider {
    static var previews: some View {
        ScrumsView(scrums: DailyScrum.data)
    }
}

ここで作ったScrumsViewを、アプリのルートViewに設定しましょう。
ScrumdingerApp.swiftの中でルートViewを記述します。

import SwiftUI

@main
struct ScrumdingerApp: App {
    var body: some Scene {
        WindowGroup {
            ScrumsView(scrums: DailyScrum.data)
        }
    }
}

これでScrumsViewがルートViewに設定されました。
アプリをbuildして確認してみましょう。
こんな感じになるはず。

ここまでのまとめ

• init()で初期化処理が書ける
• WindowGroupの中に書いたViewがルートViewになる

次回は画面遷移を作成します。

Tweet

Pocket