ホーム » Swift » 【SwiftUI】データバインディングと@Bindingの関係

【SwiftUI】データバインディングと@Bindingの関係

【SwiftUI】データバインディングと@Bindingの関係 Swift

はじめに

SwiftUI始めたてだとごっちゃになりますがこの関係について説明していきます。

データバインディングとは?

SwiftUIのデータバインディングではデータとViewを紐づけてバインドした値を変化させるとViewが変化する仕組みです。

以下のようにViewと@Stateプロパティのデータをバインドした状態でcolorの値を変化させるとViewが再描画されます。

データバインディングを可能にする仕組み

  • @State:プロパティとViewをバインディングする
  • @ObservedObject:クラスとViewをバインディングする(親Viewの再描画で破棄される)
  • @EnvironmentObject:クラスとViewをバインディングする(App全体で一意なクラス)
  • @StateObject:クラスとViewをバインディングする(親Viewの再描画で破棄されない)

@Bindingとは?

上記した@State、@ObservedObject、@EnvironmentObject、@StateObjectを親Viewから受け取り、子Viewからでも親Viewのバインドされた値を変更可能とする仕組み

  • 子View側では@Bindで定義する必要がある
  • 子Viewに渡す時は「$」をつけて渡す必要がある

@Bindingを使った一例

Toggleなどの部品も@Bindingを使っており、バインドされた値を受け取ってView内で変更している。

その結果として親Viewの変更が発生する

ソースコード

struct ContentView: View {
    
    @State var isOn = false
    
    var body: some View {
        ZStack{
            Color(isOn ? .blue : .yellow)
            VStack{
                Toggle("isOn", isOn: $isOn)
            }
        }
    }
}

Toggle

まとめ

  • データバインディングはデータとViewを紐づけてデータが更新されたらViewが更新される仕組み
  • @Bindingはバインドされたデータを子Viewから変更可能にする仕組み

環境

・Swift 5.7.2

・Xcode 14.2

・iOS 16.2

おすすめ参考書籍

図とサンプルコードが多くわかりやすく、手を動かしながら学べるのはもちろんですが、状態やデータフローに関する解説や、swiftuiから uikitを使う方法、uikitから swiftuiを使う方法などフレームワークの関連性まで説明していてとても参考になります。

SwiftUIの勉強ならUdemyがおすすめ!

私は以下の講座で勉強しています。サンプルアプリをたくさん作るので楽しく進められます。

2022/12/27時点で4345評価のベストセラーです。

SwiftUI Masterclass 2022 icon
https://www.udemy.com/courses/search/?src=ukw&q=SwiftUI

2400円と安いのもおすすめです。

英語ですが、英語のUdemyコースの勉強の仕方は以下で説明しています。簡単です。

もしご参考になりましたら下部にある役に立ったボタン、TwitterなどSNSへの投稿をしていただけると励みになります

コメント

タイトルとURLをコピーしました