【SwiftUI】Viewの境界線描画（border）

Viewの境界線を表示する.border()について解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

.border(境界線のスタイル, width: 線の太さ）

Viewに対するModifierとして使用します。
境界線のスタイルにはColorやグラデーションの他に画像も指定可能です。
引数（width）では境界線の太さを指定します。デフォルト値は1です。

struct ContentView: View {

var body: some View {

HStack(spacing: 50) {

// 赤い境界線

Text("カピ通信")

.padding()

.border(Color.red, width: 3)

// グラデーションの境界線

Text("カピ通信")

.padding()

.border(LinearGradient(gradient: Gradient(colors: [.green, .blue]),

startPoint: .topLeading,

endPoint: .bottomTrailing),

width: 3)

}

.font(.largeTitle)

}

境界線が描画されるのは、実際の境界線の内側になりますので、太さによってはViewのコンテンツと重なる場合があります。
コンテンツと境界線の間にスペースを追加するには、上記例のように.padding()と組み合わせて使用します。