【SwiftUI】Buttonの使い方

Buttonは、ユーザーがタップして何かをするの使う処理を記述するViewです。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

文字列のみのボタン

文字列のみの簡単なボタンは次のように記述します。

次の例は、表示されているボタンをタップすると、デバッグエリアにメッセージを出力するものです。

文字列のみのボタン

少し複雑なボタン

ボタンに画像を使うあるいは画像とテキストを組み合わせるような場合は、次にように記述します。

「ボタンを表すView並びを記述」の箇所は、@ViewBuilderで定義されているので、複数のViewを並べて記述できます。
ここ記述されたViewは画面上横並びに配置されます。
VStack()等を使った、レイアウトの指定も可能です。

以下は、画像とテキストを組み合わせたボタンの例です。

少し複雑なボタン

画像をボタンに使う場合の注意点

ボタンに指定された画像は通常タップ可能である事がわかるよう、SwiftUIによって青一色で表示されます。
オリジナルの色調で画像を表示したい場合は、次のModifierを追加します。

使用例

画像をボタンに使う例

(使用したボタン素材は K-factoryさんにのものでイラストACからお借りしました)

あわせて読みたい記事

【SwiftUI】リファレンスマニュアルの読み解き
SwiftUIはUIKitに比べて比較的簡単なコードで記述が可能です。チュートリアルを進めるだけで、おおよそコードの書き方は理解できるのですが、いざリファレンスマニュアルを読んでいくと、予想外の構文が並んでいて戸惑ったので、改めて解読して...
【Swift】print文の使い方
print文は式の値を標準出力に書き出す関数で、引数の値を文字列に変換して出力する事ができます。主にプログラムの動作確認やデバッグに使用します。Xcodeではprint文で出力した文字列は、デバッグエリアのコンソールウィンドウに表示され...
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。