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