【SwiftUI】Buttonの使い方

(2021/10/19 更新)

ラベルとアクションを持つButtonの使い方を解説します。

スポンサーリンク

環境

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

【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

基本的な使い方

次のようにアクションとラベルと指定してボタンを作成します。

アクションとラベルは、クロージャーの代わりにメソッドとViewでも指定できます。

使用例

UntitledImage

スポンサーリンク

テキストのみのボタン

テキストのみの簡単なボタンは、テキストを最初のパラメータとして受け取るイニシャライザも使用できます。
こちらの方がコードがすっきりしますね。

または

使用例

UntitledImage

スポンサーリンク

ボタンに役割を付加する

roleパラメータでボタンに役割(ButtonRole)を付加できます。
環境に応じて役割に応じた表示スタイルになります。

または

【引数】
role
ボタンの役割(roll)をButtonRole構造体で指定します。
nilの場合は、ボタンに役割が割り当てられていない状態の、デフォルト表示になります。

role 意味
.cancel 操作をキャンセルするボタン
.destructive 破壊的なボタン

使用例

アラートで使用した場合、「破壊的ボタン」は赤色で、「キャンセルボタン」は太文字で常に左側に表示されます。

UntitledImage

スポンサーリンク

ボタンのスタイルを指定する

次のモディファイアでボタンのスタイルを指定できます。

システムで用意されているスタイルには以下のものがあります。

.automatic
環境によって推奨されるスタイルが自動で選択されます。
デフォルトで設定されるスタイルです。

.bordered
標準の境界線アートワークを適用します。
※iOS15から使用可能になりました。

.borderedProminent
標準の境界線の目立つアートワークを適用します。
※iOS15から使用可能になりました。

.borderless
境界線を適用しないボタンスタイル。

.plain
装飾無しのボタンスタイル。

表示例

実際に表示されるデザインは使用される環境によって変わります。

UntitledImage

スポンサーリンク

iOS13.Xでラベルに画像を使う場合の注意点

Buttonのラベルに指定したテキストは、通常 .accentColor (デフォルトは青)で表示されますが、iOS13.XではラベルにImage(画像)を指定した場合も .accentColor で塗りつぶされてしまいます。
次のモディファイアを付加すると、オリジナルの色調で表示が可能です。

iOS14以降では、本モディファイアが無くてもオリジナル色調で表示されるようになりました。

UntitledImage

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Toggleの使い方
ON/OFF状態を切り替えるToggleの使い方を解説します。
【SwiftUI】Stepperの使い方
Stepperの使い方を紹介します。 [-]と[+]ののボタンで値を増減するタイプの部品です。
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。 Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。