[SwiftUI]Text(テキスト)の背景に円を表示するには？

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

Text(テキスト)の背景に円を表示する方法を紹介します。

方法

Textの背景の背景に円を表示する方法は、２つあります。

background修飾子

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

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

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

Text("テキスト")
    .background(Circle())

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .foregroundColor(.white)
                .background(
                    Circle()
                        .foregroundColor(Color.red)
                        .frame(width: 200, height: 200)
                )
        }
    }
}

ZStack

もう１つは、ZStackを使う方法です。

まず、TextをZStack内に入れます。

そして、Textの前にCircle()を配置します。

ZStack {
    Circle()
    Text("テキスト")
}

使用例

struct ContentView: View {
    var body: some View {
        ZStack {
            Circle()
                .foregroundColor(.blue)
                .frame(width: 150, height: 150)
            Text("Hello, SwiftUI")
                .foregroundColor(.white)
        }
    }
}

まとめ

Textの背景に円を表示する方法は、２つあります。

• background修飾子を使う方法
• ZStackを使う方法