【SwiftUI】ボタンデザイン (レシピ)

はじめに

SwiftUIはボタンデザインは自由に作れるようになります。

しかし、その自由が逆にどうしていいかわからんくなります。

今回はこんなデザインができるよというレシピ記事になります。

参考にした書籍

レシピ１

イメージ

コード

Button(action: {
}) {
    Text("ボタン")
        .font(.system(size: 30)) // フォントサイズ
        .foregroundColor(Color.blue) // 縦幅調整
        .padding(.vertical, 5) // 横幅調整
        .padding(.horizontal, 20) // 横幅調整
        .overlay(RoundedRectangle(cornerRadius: 4) // 外枠デザイン
            .stroke(Color.blue, lineWidth: 1)) // 外枠色/外枠太さ
}

レシピ ２

イメージ

コード

Button(action: {
}) {
    Text("ボタン")
        .font(.system(size: 30)) // フォントサイズ
        .padding(.vertical, 5) // 縦幅調整
        .padding(.horizontal, 20) // 横幅調整
        .background(Color(red: 0.921, green: 0.380, blue: 0.000)) // 背景色
        .foregroundColor(Color.white) // 文字色
        .cornerRadius(15, antialiased: true) // 丸み
}