SwiftUIで角丸ボタン

作りたい角丸ボタン

実装コード

button.swift

Button(action: {
	// アクション
}){
	Text("ボタン")
	// 枠線のフレームを作成
	.frame(width: 130, height: 50, alignment: .center)
	// フレームのコーナー設定と枠線の太さ設定
	.overlay(
		RoundedRectangle(cornerRadius: 10)
			.stroke(Color.blue, lineWidth: 2)
	)
	// ボタンの背景色を設定
	.background(RoundedRectangle(cornerRadius: 10).fill(Color.white))
	.padding(20)
}

重要ポイント

通常のようにボタンに背景色を設定しようとすると、角丸のフレームからはみ出した矩形の背景が表示されます。

// ボタンの背景色を設定
.background(Color.white)

そこで、backgroundにRoundedRectangleで同様の角丸を設定し、fillで塗りつぶしカラーを設定してあげます。

// ボタンの背景色を設定
.background(RoundedRectangle(cornerRadius: 10).fill(Color.white))

これで角丸ボタンを作成できました。