SwiftUIをはじめてみよう！- State,Binding

SwiftUIではデータを管理するProperty Wrapperと呼ばれる仕組みが使われています。その中でも頻繁に出てくるのが@Stateです。

State

State | Apple Developer Documentation

@Stateを使うことでプロパティの値とUIの状態を自動的に同期できるようになります。

struct ContentView: View {
    
    @State private var isPlaying: Bool = false
    
    var body: some View {
        
        Button(isPlaying ? "Pause" : "Play") {
                  isPlaying.toggle()
        }
           .font(.largeTitle)

    }
}

とすると

"Play"を押すと、

となります。

@State private var isPlaying: Bool = false

で宣言している変数 isPlayingが

Button()を押しことで"isPlaying.toggle()"なので"false"、"true"を交互に繰り返します。　"@State"で宣言しているのでリアルタイムに変更が適応されて

isPlaying ? "Pause" : "Play"

が実行されるので、ボタンの表示が変更されるということになります。

Binding

Binding | Apple Developer Documentation

SwiftUIのBindingの理解を深める

別のViewから@Stateで宣言している変数についてリアルタイムに変更させるには別Viewで同じ変数名を@Bindingで宣言すると別Viewで作っている部品の操作によってメインのViewに影響を与えることができます。

メインの Viewとして

struct ContentView: View {
    
    @State var isPlaying: Bool = false
    
    var body: some View {
        
        PlayButton(isPlaying: $isPlaying)

    }
}

別Viewとして

PlayButton()

を作り、引数を(isPlaying: $isPlaying)として"$"をつけて使います。
構造体の内容としては以下。

struct PlayButton: View {
    @Binding var isPlaying: Bool
    
    var body: some View {
        Button(action: {
            self.isPlaying.toggle()
        }) {
            Image(systemName: isPlaying ? "pause.circle" : "play.circle")
                .font(.largeTitle)
        }
    }
}

ここでリアルタイムに変更したい変数について @Bindingをつけて宣言します。

@Binding var isPlaying: Bool

そしての構造体でその変数の挙動を定義、ここでは画像の切り替えを行います。押すたびに入れ替わります。