【SwiftUI】角丸ボタンを作る。

備忘録

背景

下記のAPIで角丸ボタン作れるみたいだが、Deprecatedになっている
https://developer.apple.com/documentation/familycontrols/familyactivityiconview/cornerradius(_:antialiased:)

そのため、角丸ボタンを他の方法で作ったけど少し時間が掛かったのでQiitaに残しておく

ソースコード

struct RoundedRectangleButton: View {
    // 各パラメータ
    var text: String
    var textColor: Color
    var backgroundColor: Color
    var fontWeight: Font.Weight
    var cornerRadius: CGFloat
    var width: CGFloat
    var height: CGFloat
    var action: () -> Void
    
    var body: some View {
        Button(action: { action() }, label: {
            ZStack(content: {
                RoundedRectangle(cornerRadius: cornerRadius)
                    .fill(backgroundColor)
                    .frame(width: width, height: height)
                
                Text(text)
                    .foregroundColor(textColor)
                    .fontWeight(fontWeight)
            })
        })
    }
}

struct HogeView: View {
    var body: some View {
    // do something...

    RoundedRectangleButton(text: "リセット",
        foregroundColor: .white,
        backgroundColor: .red,
        fontWeight: .semibold,
        cornerRadius: 10,
        width: view.size.width / 2,
        height: 48) {
            // ボタンアクション
        }
    }
}

下記のようなボタンが作れるようになる