【SwiftUI】State

【SwiftUI】Stateについて

2021年2月24日 2021年10月31日

@StateはプロパティラッパーというSwiftUIの機能で、
今まではプロパティの値が更新された場合、その値が変わったらviewを再度更新するという処理を書く必要がありました。
でも、この@Stateを宣言して作成されたプロパティについては値が更新されると、
自動的にSwiftUIが検知してViewを再構築してくれるようになります。
めちゃくちゃありがたいですね！

structのプロパティで、
@Stateで宣言したプロパティがあると、
その値に更新が入るたびに、viewを再構築(再実行)してくれるようになります。
その挙動を確認してみましょう！

Contents

1 @Stateで宣言した場合
2 @Stateで宣言しない場合
3 SwiftUIでのデバッグ方法

@Stateで宣言した場合

import SwiftUI

struct KarteViewController: View {
    
    @State var filter_flg:Bool = false
    
    var body: some View {
        VStack(){
            // == Filterの表示 == //
            Button(action: {self.filter_flg=true}, label: {
                Text("true")
            }).frame(width: 800, height: 30, alignment: .center)
            Button(action: {self.filter_flg=false}, label: {
                Text("false")
            }).frame(width: 800, height: 30, alignment: .center)
            
            let width: CGFloat = 100 + 100
            let _ = print(width)
        }
    }
}

実際にコンソールを見ながら、表示を確認すると、
widthの値が200がボタンをクリックするたびに実行されるので、毎回Stateで宣言した値のfilter_flgの値が
更新されるたびにviewが再度読み込まれ実行されているのが確認できる。

@Stateで宣言しない場合

import SwiftUI

struct KarteViewController: View {
    
    var filter_flg:Bool = false
    
    var body: some View {
        VStack(){
            // == Filterの表示 == //
            Button(action: {self.filter_flg=true}, label: {
                Text("true")
            }).frame(width: 800, height: 30, alignment: .center)
            Button(action: {self.filter_flg=false}, label: {
                Text("false")
            }).frame(width: 800, height: 30, alignment: .center)
            
            let width: CGFloat = 100 + 100
            let _ = print(width)
        }
    }
}

実際にコンソールを見ながら、表示を確認すると、
ボタンをクリックするたびにfilter_flgの値が更新されるが、コンソール上に200という値が表示されないため、
viewは再度構築されることはありません。

結果的に1つでもstateがあって、それが更新されるとviewが再構築されるということになります。