@Stateとは何か？　swiftUI｜プラスワーク

swiftとは

@Stateとは何か？

値の受け渡し、状態を管理するのに利用をします。

プロパティが更新された場合に、参照しているViewも同時に更新される仕組みが作れます。

swiftuiになり、この部分が大幅に便利になりました。

ボタンが押された、スライダーを利用した場合、設定した変数などが変わるのでViewを変化させる必要がありますの。

そこで

SwiftUIで変数の状態を監視するにはProperty Wrappers(プロパティラッパー)を使います。

@State・・・Viewの状態と変数の値を監視する

@Binding・・・他のViewの@State変数を参照・変更する

@ObservedObject・・・構造体・クラスの変更を監視する。

@Environment・・・予め定義されたViewの環境情報を取得する

@EnvironmentObject・・・構造体・クラスの変更を監視する

@State・・・一つのView内でのみ、使用する事ができる。

@Binding・・・ほかのViewの@Stateを受け継ぐ事ができます。

@State

@Stateは一つのViewで使える

1.値が更新可能になります。　Structはプロパティを更新する事が出来ません。なぜなら、Structだからです。

import SwiftUI

struct SheetView: View {
@Binding var isPresented: Bool
@Binding var catName: String

var body: some View {
VStack {
TextField("My cat's name is...", text: $catName)
.multilineTextAlignment(.center)
Button("Close Result") {
self.isPresented.toggle()
}
}
}
}

struct ContentView: View {
@State private var isPresented: Bool = false
@State private var catName: String = "Tora"

var body: some View {
VStack {
Text(catName)
Button("Show Result") {
self.isPresented.toggle()
}
}
.sheet(isPresented: $isPresented) {
SheetView(isPresented: self.$isPresented, catName: self.$catName)
}
}
}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

swiftUIへの道さんを参照してください。

@ObservedObject

@StateでViewの状態管理は可能ですが、複数の値を状態管理する場合プロパティの宣言が多く、管理が大変になります。
そこで、@ObservedObjectを利用します。プロパティをひとまとめにして、オブジェクトとして管理できます。

追加するオブジェクトはObservableObjectプロトコルに準拠する必要があります。

監視するプロパティは@Publishedを付与します。

// ObservedFuga.swift

import SwiftUI

class ObservedFuga : ObservableObject {
@Published var isDisp: Bool = false
@Published var value = 0.0
}

// HogeView.swift

import SwiftUI

struct HogeView: View {
@ObservedObject var object: ObservedFuga

var body: some View {
VStack {
Toggle(isOn: self.$object.isDisp) {
Text("Show Favorite")
}
Slider(value: self.$object.value, in: 0...100)
if (self.object.isDisp) {
Text("Value is \(self.object.value)")
}

}
}
}

struct HogeView_Previews: PreviewProvider {
static var previews: some View {
HogeView(object: ObservedFuga())
}
}