@Stateについてサンプルで理解する。

はじめに

swiftUIを学習していて、何だこれってなった@Stateについて自分なりにサンプルを実装して理解を深めたいと思います。

@Stateとは

プロパティの値とUIの状態を自動的に同期する仕組みである。 @Stateをつけると二つのことができる。

• つけたプロパティを監視して更新されたら、Viewが再描画される。
• 構造体の中に定義したプロパティは内部から変更することはできないが、変更することができるようになる。

サンプル実装

以下のサンプルがボタンを押下すると、画面に表示されているテキストがみかんからりんごに変わるというとても簡単なものです。

@Stateをつけずに確認

変数fruitをみかんで初期化しています。ボタンを押下するとfruitにりんごを代入します。ですが代入箇所でエラーが出ているのが分かります。structに定義された、変数fruitを変更することはできません。mutatingを使用すれば変更することは可能ですが、今回はfruitが変更されたらテキストの表示も変更する必要があるためNGです。

Cannot assign to property: 'self' is immutable

@Stateを追加して確認

変数fruitに@Stateを追加して、プロパティ内部から変更することができるようになった為エラーが消えました。

以下がソースになります。

struct ContentView: View {
    
    @State var fruit = "みかん"
    
    var body: some View {
        
        VStack {
            Text(fruit)
                .font(.title)
                .padding(.bottom, 10)
            
            Button(action: {
                self.fruit = "りんご"
            }) {
                Text("りんごに変えるButton")
            }
        }
    }
}

まとめ

@Statetとは、プロパティの宣言時に使えるSwiftUIのカスタム属性で、プロパティの値とUIの状態を自動的に同期する仕組みを実現するために必要。

参考リンク

Apple Developer Documentation

【SwiftUI】@Stateの使い方 | カピ通信

【SwiftUI】@Stateの使い方を徹底解説 | iOS-Docs