[SwiftUI] SwiftUI の ButtonStyle 一覧

環境＆対象

SwiftUIの Button

SwiftUI には、ボタンを表す Button という View が用意されています。

表示を変更したい時には、.buttonStyle という View Modifier で変更することができます。

名前からだけでは想像できない部分もあるので、その外観一覧を作ってみました。

・一番上には、Style 未指定のボタンを表示しています。
・各 Style の名前を左上に表示しています。
・ボタンの境界をわかりやすくするために、ボタンの背景には、.orange を表示しています。
・クリック可能領域を見えるかするために、border(.red) を offset してボタンの横に表示しています。
　Style によって、領域が少し異なることがわかります。

iOS での Button

iPhone11 シミュレータ, iOS15.4 を使用したスクリーンショットです。

Light Mode

Dark Mode

macOS での Button

macOS 12.4 beta 上でのスクリーンショットです。

# automatic でのボタンが青いリングを持っているのは、フォーカスを持っているためです。

Light Mode

Dark Mode

まとめ

SwiftUI での Button について iOS, macOS 毎に Style のスクリーンショットを列挙しました。

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

関連記事:

[SwiftUI] ButtonStyle による Button カスタマイズ [SwiftUI] インジケータ付き LongPress できる Button (ButtonStyle を使ったカスタマイズ) [SwiftUI] Button の見た目カスタマイズ ButtonStyle の使い方 AppStore申請時のスクリーンショット