[SwiftUI]Button(ボタン)に枠線(border)をつけるには？

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

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

方法
1. overlay
2. border
まとめ

方法

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

overlay

１つは、overlayを使う方法です。

まず、Buttonに「.overlay」をつけ、overlayの引数にRoundedRectangleを指定します。

更に、RoundedRectangleの末尾に「.stroke」をつけます。

そして、strokeの第１引数に枠線の色、第２引数「lineWidth」に枠線の太さを指定します。

Button("Button"){
    //処理
}
.overlay(
    RoundedRectangle(cornerRadius: 0)
        .stroke(/*色*/, lineWidth: /*枠線の太さ*/)
)

使用例

struct SampleView: View {
    
    var body: some View {
        VStack{
            Button("Button"){
                print("Tap")
            }
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 0)
                    .stroke(Color.blue, lineWidth: 2)
            )
        }
    }
}

border

もう１つは、borderモディファイアを使う方法です。

まず、Buttonの末尾に、「.border()」をつけます。

そして、「.border()」の第１引数に枠線の色、第２引数「width」に枠線の太さを指定します。

Button("Button"){
    ・・・
}
.border(/*色*/, width: /*太さ*/)

使用例

struct SampleView: View {
    @State var _isOn = false;
    
    var body: some View {
        VStack{
            Button("Button"){
                print("Tap")
            }
            .padding()
            .border(Color.blue, width: 2)
        }
        .padding()
    }
}