SwiftUIにおける変数の扱い方【View間のデータ渡しObservableObject 】

2023年12月3日 2024年7月24日

mikishin

今回はクラスデータを親Viewから子Vieｗへ渡す方法としてObservedObjectを使用した方法を記載していきます。

構造体、文字列、変数などの値型を親Viewから子Viewへの受渡しについては以下の記事にて紹介していますのでそちらを参照ください。

1. ObservedObjectを使用したView間でのデータ受渡し
1.1. ObservableObjectに準拠したクラス宣言
1.2. StateObjectを使用したインスタンス化
1.3. ObservedObjectを使用して子Viewで使用

本記事作成時の環境

macOS: Sonoma 14.1.1
Xcode 15
Swift 5.9

ObservedObjectを使用したView間でのデータ受渡し

View間でクラスのデータを扱いたい場合、プロトコルObservableObjectを使用し監視したいクラスのプロパティ宣言に＠Publishedを付けることでView間でのクラスデータの受渡をしViewの部品に使用することができます。Publishedを使用して宣言することにより、その変数が変更されると使用しているViewの表示を自動で更新してくれます。

View間でクラスを使用するには以下のプロパティラッパー（Propaty Wrapper）を使用します。

＠StateObject
@ObservableObject
@ObservedObject

ObservableObjectに準拠したクラス宣言

プロトコルObservableObjectに準拠しクラスを宣言します。

class SecondViewSharedData: ObservableObject {
  @Published var showSecondView = false
  @Published var textDay = ""
}

StateObjectを使用したインスタンス化

宣言したObservableObjectに準拠したクラスを＠StateObjectを使用してインスタンス化し使用ます。

class SecondViewSharedData: ObservableObject {
  @Published var showSecondView = false
  @Published var textDay = ""
}

struct SampleView: View {
	@StateObject var sharedData: SecondViewSharedData = SecondViewSharedData()
	
	var body: some View {	
		Text("SecoundViewへ")
			.onTapGesture {
				let today = Date()
                if let month = Calendar.current.dateComponents([.month], from: today).month,
                   let day = Calendar.current.dateComponents([.day], from: today).day {
					sharedData.textDay = String(”\(month)/\(day)”)
			    	sharedData.showSecondView = true
				}
			}
			.sheet(isPresented: $sharedData.showDayDetailsView) {
				ContentViewObserbableObjectSecond(sharedData: sharedData)
			}
	}
}

ObservedObjectを使用して子Viewで使用

親Viewでインスタンス化したクラスを子クラスで受け取って扱うには＠ObservedObjectで宣言し受け取ります。

struct ContentViewObserbableObjectSecond: View {
  @ObservedObject var sharedData: SecondViewSharedData

  var body: some View {
    Text("Hello, World Day: \(sharedData.textDay) ! \n onTap Return View")
      .multilineTextAlignment(.center)
      .onTapGesture {
        sharedData.showSecondView = false
      }
  }
}