SwiftUI 小技巧：利用 border 修飾符　輕鬆為按鈕或文本繪製邊框

有了 SwiftUI ，我們就可以使用 border 修飾符，輕鬆在按鈕 (button) 或文本 (text) 外圍繪製邊框，而且這方法更適用於所有視圖！比如說，你想要創建一個這樣的按鈕：

我們可以在按鈕物件上應用 border 修飾符，來創建有顏色邊框的按鈕：

Button(action: {
    print("Hello button tapped!")
}) {
    Text("Hello World")
        .fontWeight(.bold)
        .font(.title)
        .foregroundColor(.purple)
        .padding()
        .border(Color.purple, width: 5)
}

但是，如果你的設計師想你創建一個像這樣的圓角邊框按鈕，你可以怎樣做呢？

在 Xcode 11 beta 6 版本推出之前，你可以使用 border 修飾符，設定邊框角落的半徑：

.border(Color.purple, width: 5, cornerRadius: 20)

但是，Xcode 11 最新的 beta 版本已經棄用了函數調用 (function call)。要創建帶圓角的邊框，你可以如此繪製一個圓角矩形，並覆蓋在按鈕上：

Button(action: {
    print("Hello button tapped!")
}) {
    Text("Hello World")
        .fontWeight(.bold)
        .font(.title)
        .foregroundColor(.purple)
        .padding()
        .overlay(
            RoundedRectangle(cornerRadius: 20)
                .stroke(Color.purple, lineWidth: 5)
        )
}

在上面的程式碼中，我們使用了一個 RoundedRectangle、及其 stroke 修飾符來創建圓角邊框。你可以修改顏色和線的寬度，來調整邊框的外觀。

要創建一個不同樣式的按鈕，你可以簡單地使用另一個形狀物件來繪製邊框。比如說，你可以用 Capsule 取代 RoundedRectangle，來創建一個這樣的邊框：

你也可以試著指定 StrokeStyle，讓按鈕邊框變成虛線：

Button(action: {
    print("Hello button tapped!")
}) {
    Text("Hello World")
        .fontWeight(.bold)
        .font(.title)
        .foregroundColor(.purple)
        .padding()
        .overlay(
            Capsule(style: .continuous)
                .stroke(Color.purple, style: StrokeStyle(lineWidth: 5, dash: [10]))
        )
}

如果你想進一步了解 SwiftUI 按鈕，歡迎在這裡閱讀我們的初學者指南。