[SwiftUI]四角形(Rectangle, RoundedRectangle)内にテキスト(text)を表示するには？

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

RectangleやRoundedRectangleなどの四角形の中にテキストを表示する方法を紹介します。

方法
まとめ

方法

四角形内にテキストを表示する方法は、３つあります。

background

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

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

そして、background修飾子の引数にRectangleやRoundedRectangleを指定します。

Text("テキスト")
    .background(
        Rectangle() //もしくはRoundedRectangle
    )

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, Swift")
                .foregroundColor(.white)
                .padding()
                .background(
                    Rectangle()
                        .fill(.blue)
                )
        }
    }
}

overlay

２つ目は、overlay修飾子を使う方法です。

まず、RectangleやRoundedRectangleにoverlay修飾子を付与します。

そして、overlay修飾子の引数にTextを指定します。

Rectangle()
    .overlay(
        Text("テキスト")
    )

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 5)
                .fill(.red)
                .frame(width: 300, height: 100)
                .overlay(
                    Text("Hello, SwiftUI")
                        .foregroundColor(.white)
                )
        }
    }
}

ZStack

３つ目は、ZStackを使う方法です。

具体的には、ZStackのクロージャに、四角形（Rectangle, RoundedRectangle）とTextを指定します。

指定する順番は、最初に四角形、その次にTextです。

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

使用例

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 200, height: 100)
            Text("Hello, SwiftUI")
                .foregroundColor(.white)
        }
    }
}