[SwiftUI]ビューに角丸の枠線をつける(view add border corner radius)には？

どうも、ちょげ(@chogetarou)です。

ビューに角丸の枠線をつける方法を紹介します。

方法
使用例

方法

ビューに角丸の枠線をつけるには、overlay修飾子を使います。

まず、ビューにoverlay修飾子を付与します。

次に、overlay修飾子の引数にRoundedRectangleを指定します。

RoundedRectangleの引数「cornerRadius」に角の丸みを指定します。

SampleView()
    .overlay(
        RoundedRectangle(cornerRadius: 角の丸み)
    )

そして、RoundedRectangleにstroke修飾子を付与します。

最後に、stroke修飾子の第１引数に枠線の色、引数「lineWidth」に枠線の太さを指定します。

SampleView()
    .overlay(
        RoundedRectangle(cornerRadius: 角の丸み)
            .stroke(枠線の色, lineWidth: 枠線の太さ)
    )

これでビューに角丸の枠線が追加されます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Bordered Text")
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.pink, lineWidth: 2)
                )
        }
    }
}