【SwiftUI入門】@Stateの使い方まとめ
この記事の目次
@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が更新されて表示内容もすぐに切り替わります。