![見出し画像](https://assets.st-note.com/production/uploads/images/74011566/rectangle_large_type_2_3da3b450bbd03ee5d7abad3f78f60f24.png?width=1200)
SwiftUIでListを実装し設計を学ぶ②
こんにちは。ママさんエンジニアのトモヨです。
①ではjsonデータの読み込みからListへの表示を行いました。
データをプロパティにしていましたが、破棄するタイミングを見失ってしまっています。管理として良くないのでAppが生成するときに作成するようにしましょう。
①データを変更する
まずModelData.swiftのfruitsをObservableObjectに準拠したクラスのプロパティに変更します。
// ModelData.swift
final class ModelData: ObservableObject {
@Published var fruits: [FruitsData] = load("fruitsData.json")
}
そして、今まではModelData.swiftが読み込まれた時にfruitsは生成されていましたが、Appが生成されたときに保持するように変更します。
@StateObject private var modelData = ModelData()
@StateObjectをつけたプロパティを定義します。なぜ@StateObjectなのかは別記事で詳しく記載します。
出来上がったクラスがこんな感じです
// SwiftUI_ListApp.swift
import SwiftUI
@main
struct SwiftUI_ListApp: App {
@StateObject private var modelData = ModelData()
var body: some Scene {
WindowGroup {
// ContentViewにmodelDataを渡したい。。。
ContentView()
}
}
}
②クラスの構成を理解する
下記のような感じです
![](https://assets.st-note.com/production/uploads/images/74011703/picture_pc_8d040732b29904f5730985500a609685.png?width=1200)
@StateObjectを付与しましたのでAppから2階層したのFruitsList.swiftにmodelDataを引き渡すことができます。
// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
FruitsList()
}
}
プレビューでは引き渡すことができなかったので生成します
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.environmentObject(ModelData())
}
}
③Listの編集
ListはAppから引き渡したmodelDataを使用するように変更します。
// FruitsList.swift
struct FruitsList: View {
@EnvironmentObject var modelData: ModelData
var body: some View {
List(modelData.fruits) { fruits in
Text(fruits.name)
}
}
}
完成しました
![](https://assets.st-note.com/img/1646967930539-DKkPnFRtkd.png?width=1200)
これにてデータを作成し、Listを表示することができました。
次回はさらにリッチなセルを作成したいため、セルの生成を行います。
この記事が気に入ったらサポートをしてみませんか?