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

SwiftUI

2022.05.25

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

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

方法
1. border修飾子
2. overlay修飾子
まとめ

方法

Textに枠線を付ける方法は、２つあります。

border修飾子

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

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

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

Text("テキスト")
    .border(色, width:太さ)

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

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .padding()
                .border(Color.red, width:3)
        }
    }
}

overlay修飾子

もう１つは、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)
                )
        }
    }
}