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

SwiftUI

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

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

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

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

border修飾子

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

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

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

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

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

使用例

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

overlay修飾子

もう1つは、overlay修飾子を使う方法です。

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

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

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

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

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

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)
                )
        }
    }
}
スポンサーリンク

まとめ

Textのテキストに枠線をつける方法は、2つあります。

  • border修飾子を使う方法
  • overlay修飾子を使う方法

コメント

タイトルとURLをコピーしました