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になる
次回は画面遷移を作成します。