【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】Toggleの使い方
ON/OFF状態を切り替えるToggleの使い方を解説します。
【SwiftUI】Stepperの使い方
Stepperの使い方を紹介します。[-]と[+]ののボタンで値を増減するタイプの部品です。
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信