見出し画像

SwiftUIで行こう!-- @State

@Stateを注目してみていきます。@StateはSwift5.1で導入されたProperty Wrappersです。SwiftUIの特徴的なものの一つです。

まず参考サイトです。

端的にまとまっていてわかりやすいです。

要するに、SwiftUIでコードを組んでいく場合は"struct"を使うんですがstruct"だと値が基本的には変更はできない。変更する場合はmutatingが必須になりますが、SwiftUIでは@Stateを使うことで簡単に値の変更が可能となります。すごいところは、SwiftUIで使うと、プロパティの値とUIの状態の同期が実現されViewが自動的に再描画されます。便利!

試してみます。Playgroundで実行します。

import SwiftUI
import PlaygroundSupport
struct ContentView: View {
   @State  var show = false
   var body: some View {
       VStack {
           Button(action: {
               self.show.toggle()
           }) {
                Image(systemName: "power")
           }

           Text(show ? "True" : "false")
       }
   }
   
}
let content =  ContentView()
PlaygroundPage.current.liveView = UIHostingController(rootView: content)

3項演算子を使うと

Text(show ? "True" : "false")

ですが、単純にif文で、

if show {
   Text("True")
 }else{
   Text("false")
 }

としても可能です。

self.show.toggle()

これで、ボタンを押すごとに、true,falseを交互に切り替えます。

ボタンであるpowerアイコンを押すたびに"True"と"False"を切り替えて実行されます。

画像1

次です。

@BindingをつけてやるとView間での双方向のデータ共有が可能となります。参考サイトです。

例えばということでコードを

import SwiftUI
struct ContentView: View {
   @State private var isPresented = false
   var body: some View {
       Button("Present") {
           self.isPresented.toggle()
       }
       .sheet(isPresented: $isPresented) {
           DismissView(isPresented: self.$isPresented)
       }
   }
}

別にViewを作って

struct DismissView: View {
   @Binding var isPresented: Bool
   var body: some View {
       Button("Dismiss") {
           self.isPresented.toggle()
       }
   }
}

画面遷移させます。

@State private var isPresented = false
@Binding var isPresented: Bool

ですね。@Stateと@Bindingをつけて関連づけするとView間のデータの受け渡しがうまくいきます。親View、子Viewとの関係がある時に有効です。

この記事が気に入ったらサポートをしてみませんか?