[SwiftUI]VStackに枠線(border)をつけるには？

[SwiftUI]VStackに枠線をつけるには？

SwiftUI

2022.02.13

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

VStackに枠線をつける方法を紹介します。

方法
1. border
2. overlay
まとめ

方法

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

border

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

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

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

VStack {
    Text("Hello")
    Text("World")
    Text("SwiftUI")
}
.padding()
.border(Color.red, width: 2) //第１引数に色、引数「width」に太さ

overlay

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

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

次に、overlayの引数に「RoundedRectangle」を指定し、RoundedRectangleの引数「cornerRadius」に角の丸みを指定します。

そして、RoundedRectangleにstroke修飾子を付与し、strokeの第１引数に色、第２引数「lineWidth」に太さを指定します。

VStack {
    Text("Hello")
    Text("World")
    Text("SwiftUI")
}
.padding()
.overlay(
    RoundedRectangle(cornerRadius: 3) //cornerRadiusに角の丸み
         .stroke(Color.blue, lineWidth: 3) 
         //第１引数に枠線の色、第２引数「lineWidth」に枠線の太さ
)