[SwiftUI] SwiftUI の ButtonStyle 一覧

SwiftUI2021

     

TAGS:

SwiftUI の ButtonStyle で指定するボタンの外観をリストにしてみました。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 12.4 beta
  • Xcode 13.3
  • iOS 15.4

SwiftUIの Button

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

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

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

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

iOS での Button

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

Light Mode

lightmode

Dark Mode

darkmode

macOS での Button

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

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

Light Mode

lightmode

Dark Mode

darkmode

まとめ

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

SwiftUI での Button について iOS, macOS 毎に Style のスクリーンショットを列挙
  • Style 指定で、どうなるかはわかりずらい(気がする)
  • Style 指定で、クリック可能範囲も微妙に変わる

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

コメントを残す

メールアドレスが公開されることはありません。