[SwiftUI]Text(テキスト)に角丸の枠線を付けるには？

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

Text(テキスト)に角丸の枠線をつける方法を紹介します。

方法

Textに角丸の枠線を付けるには、overlay修飾子を使います。

まず、Textにoverlay修飾子を付与します。

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

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

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

border修飾子の第１引数に枠線の色、第２引数に枠線の太さを指定します。

Text("テキスト")
    .overlay(
        RoundedRectangle(cornerRadius: 角の丸み)
            .stroke(色, lineWidth: 太さ)
    )

Textに上記のoverlay修飾子を付与することで、Textに角丸の枠線がつきます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.red, lineWidth: 3)
                )
        }
    }
}