[SwiftUI]Text(テキスト)の背景色を角丸にする(background color rounded corners)には？

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

Text(テキスト)の背景色を角丸にする方法を紹介します。

方法
1. cornerRadius修飾子
2. clipShape修飾子
まとめ
1. 関連

方法

Textの背景色を角丸にする方法は、２つあります。

cornerRadius修飾子

１つは、cornerRadius修飾子を使う方法です。

まず、Textにbackground修飾子を付与し、background修飾子の引数に背景色を指定します。

そして、背景色にcornerRadius修飾子を付与します。

cornerRadius修飾子の引数には、角の丸みを指定します。

Text("テキスト")
    .background(color.cornerRadius(角の丸み)) //colorは背景色

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(.white)
                .padding()
                .background(Color.blue.cornerRadius(10))
        }
    }
}

clipShape修飾子

もう１つは、clipShape修飾子を使う方法です。

まず、Textにbackground修飾子を付与し、background修飾子の引数に背景色を指定します。

背景色にclipShape修飾子を付与します。

そして、clipShape修飾子の引数にRoundedRectangle()を指定します。

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

Text("テキスト")
    .background(
        color.clipShape(RoundedRectangle(cornerRadius: 角の丸み))
    )

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(.white)
                .padding()
                .background(
                    Color.red.clipShape(RoundedRectangle(cornerRadius: 15))
                )
        }
    }
}