【SwiftUI入門】Buttonを関数とクロージャで使ってみる
この記事の目次
Button
Buttonとはクリックした時に何らかの処理を行うUI部品のことです。
Buttonは
| Button(action: ボタンが押されたときの処理){ ボタンの見た目} |
と記述します。
ボタンが押されたときの処理は関数かクロージャを使います。
ボタンの見た目にはTextなどのUI部品を使います。
それでは、実際に使ってみましょう。
適当にSwiftUIのプロジェクトを作成してください。
クリックしたらコンソールに『ボタンが押されました』と出力されるようにしてみましょう。
関数とクロージャを使ってそれぞれ作ってみます
まずは関数を使った例です。
『ボタンが押されました』とだけコンソールに出力される関数を作りましょう。
ContentViewの下に
| func Report(){ print(“ボタンが押されました”) } |
と記述しましょう。
作った関数はButtonのactionに指定します。
| Text(“Hello, World”)! |
を
| Button(action: Report){ Text(“ボタンを押してください”)} |
と書き換えましょう。
コードについて簡単に説明しておきましょう。
Buttonの波かっこの中のUI部品はButtonの見た目を表します。
今回は『ボタンを押してください』というTextが格納されているので、
そのようにButtonは表示されます。
次にactionに指定した関数はButtonが押されたときの処理です。
今回はコンソールに『ボタンが押されました』と出力するReportという関数を指定したので、
Buttonを押したら、『ボタンが押されました』とコンソールに出力されるはずです。
Debug Previewで見てみましょう。
Debug Previewというのはコンソールに何か出力する時などに使うモードです。
Debug Previewを表示するには、まずLive Previewボタンを『Controlキー』を押しながらクリックしてください。
Live PreviewかDebug Previewのどちらを使うのか聞かれるので、
Debug Previewを選択します。
するとDebug Previewが開始します。
Buttonを押してみましょう。
すると、下の方にあるコンソールに『ボタンが押されました』と出力されますね。
うまくいきました。
今回はactionに関数を指定しましたが、クロージャを使えば関数を定義する必要がないのでシンプルに書けるようになります。
関数の部分をクロージャに書き換えてみましょう。
ここの部分を
引数と戻り値を省略したクロージャに置き換えます。
| { print(“ボタンが押されました”) } |
関数Reportは
不要なので消しておきましょう。
関数をクロージャで置き換えても同じ挙動になるのかDebug Previewで確かめてみましょう。
『Controlキー』を押した状態で実行ボタンをクリックし、
『Debug Preview』を押しましょう。
この状態でButtonを押してみます。
すると関数の時と同じように『ボタンが押されました』とコンソールに出力されましたね。
