[iOS] SwiftUI - @State, @Binding

SWIFTUIとmvvmを体験する過程で得た2つのProperty Wrapperをまとめます!

State

UImitを使用する場合、変数が変化した場合は、これらの変化を直接観察して反映する必要がありますが、SWIFTUIはプロパティパッケージを使用してこれらのタスクの自動化を実現します.

が変化した場合、属性パッケージ

は、変数の値が読み取りまたは書き込み可能であることを示す.

SWIFTUI管理Stateの属性として宣言されたリポジトリ

State値が変更すると、ビューはその値の外観を無効にし、ボディ値

を再計算します.

状態変数値が変更するとビューが再登録されるため、常に最新値

がある.

状態インスタンス自体は値ではなく、読み書き値

である.

は、現在のビューUIの特定の状態を記憶するために作成するものであり、通常、プライベート

である.

2@Stateプロパティを使用してpropertyの初期値を指定する場合は、他の値に再割り当てすることはできません.@Binding変数でのみ

を指定できます.

Binding

@Stateとして宣言された属性を別のビューで使用する場合は、@Bindingを使用します.使用する場合、前に$を使用してBining変数を表します.@Stateとして宣言された属性が変更された場合、@Binding変数はその属性を認識し、その値に伴うビューの変化を直ちに反映します.
@Stateプロパティとして宣言されたプロパティを異なるビューで使用する場合は、@Bindingプロパティを使用します.

は、$の前がバインド変数

であることを示す.
外部からのアクセスが必要な

なので、専用X

例

数値を増やしてsheetを開き、簡単なアプリケーションで適用します.
まず結果を見てみましょう.

初めまして

struct ContentView: View {
    
    @State var presenting = false
    @State private var number : Int = 167
    
    var body: some View {
        VStack {
            Text("Number is \(number)")
                .fontWeight(.semibold)
                .font(.system(size: 30))
                .padding(.bottom, 20)
            
            Button(action: {
                self.number += 1
            }, label: {
                Text("Add")
                    .foregroundColor(.white)
                    .font(.system(size: 25))
                    .fontWeight(.bold)
                    .padding(10)
            })
                .background(Color.green)
                .padding(50)
            
            Button(action: {
                self.presenting = true
            }, label: {
                Text("Move to Check")
                    .foregroundColor(.white)
                    .font(.system(size: 25))
                    .fontWeight(.bold)
                    .padding(10)
            })
                .background(Color.blue)
                .padding(50)
                .sheet(isPresented: self.$presenting){
                    DetailView(number:
                                self.$number)
                }
            
            
        }
    }
}

ビューの確認

struct DetailView: View {
    @Binding var number : Int
    
    var body: some View {
        Text("Number : \(number)")
    }
}

@Stateと宣言された属性numberの値が変化した場合、この変化はDeatilViewで@Bindingによって自然にビューに反映されていることがわかります!