【SwiftUI入門】@Stateのvarを使った初期化

この記事の目次

@State

@StateとはViewのプロパティの値を変更できるようにするものです。

ボタンを押したらプロパティの値を変更するといった処理は@Stateをプロパティに付けなければできないので注意してください。

また、@Stateを付けたプロパティの値が変わった時にViewが更新されます。

@Stateは

@State プロパティを定義

と記述します。

実際に使ってみましょう。

SwiftUIのプロジェクトを作成してください。

今回は@Stateを使って、Buttonを押したら苗字が変わるようなコードを書いていきます。

まずは名前と苗字のプロパティを作りましょう。

@State var lastName = “田中”
let firstName = “太郎”

と記述します。

次にフルネームのテキストを表示して、ボタンを押したら苗字が変わるようにしましょう。

ここを

VStack {
    Button(action: {self.lastName = “島田”}){
        Text(“苗字を変える”)
    }
    Text(lastName + firstName)}

と書き換えましょう。

コードについて説明していきます。

まず、UI部品をVStackで囲って

UI部品を垂直方向(縦)に複数配置できるようにします。

VStackの中にはlastNameとfirstNameを足し合わせた文字列を表示するテキストを配置します。

lastNameには『田中』が

firstNameには『太郎』

が格納されているので、それらを足し合わせて『田中太郎』と表示されます。

またVStackの中にはクリックするとlastNameを『島田』に変更するButtonを記述しています。

Buttonの中身についても説明しておきましょう。

まず、Buttonの見た目を指定します。

今回は『苗字を変える』というTextを見た目に使っています。

Buttonを押したときの処理はクロージャの省略型を使って記述しています。

クロージャの中身を見てみると、self.lastNameの値を

『島田』に変えるという内容です。

selfはこの構造体の

中のものであることを表しているので、self.lastNameはプロパティlastNameのことです。

なので、

という記述はlastNameプロパティの値を『田中』から『島田』に変更するという意味になります。

TextでlastNameが使われているので、

Buttonが押され、値が『島田』になると表示内容は『田中太郎』から『島田太郎』に変わるはずです。

実際にそうなるのか実行して確かめてみましょう。

Live PreViewボタンを押してください。

Live PreViewに切り替わったら『苗字を変える』ボタンを押しましょう。

すると予想通り、表示されているテキストが『島田太郎』に変わりますね。

このように@Stateを付けたプロパティの値は変更することができて、変更された時にViewが更新されて表示内容もすぐに切り替わります。