【SwiftUI】VStackやHStackに枠線をつける方法

この記事では、VStackやHStackに枠線をつける方法を紹介します。

実装方法

実装方法は以下の2パターンあります。それぞれ解説していきます。

1. borderを使った方法
2. overlayを使った方法

1. borderを使った方法

VStack、HStackにモディファイアとして、.border(Color.blue, width: 3)をつけるだけです。第一引数にColor型、第二引数に線の太さを記述します。

VStack {
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
}
.border(Color.blue, width: 3)

しかしこの方法では、丸くできません。。

そこで、次のoverlayを使います。

2. overlayを使った方法

以下のように、2行のモディファイアをつけます。cornerRadius: 30のところで丸みを変えられて、(Color.blue, lineWidth: 3)のところで色と太さが変更できます。

VStack {
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
}
.overlay(RoundedRectangle(cornerRadius: 30)
    .stroke(Color.blue, lineWidth: 3))

overlayは、VStackに線をつけているのではなく、VStackの上にRoundedRectangleを重ねて置いてそこに枠線をつけているというイメージです。

もし、この状態で背景も丸くしたいというなら、RoundedRectangleでクリッピングしちゃいましょう。

VStack {
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
    Text("Hello, world!")
        .padding()
}
.background(.green)
.overlay(RoundedRectangle(cornerRadius: 30)
    .stroke(Color.blue, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 30))