iOS App 程式開發

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

SwiftUI 小技巧:利用 border 修飾符 輕鬆為按鈕或文本繪製邊框
SwiftUI 小技巧:利用 border 修飾符 輕鬆為按鈕或文本繪製邊框
In: iOS App 程式開發, Swift 程式語言, SwiftUI 框架, Xcode

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

swiftui-button-border
編註:本教程使用 Xcode 11 beta 6 作測試。

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

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

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

rounded border button - swiftui

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,來創建一個這樣的邊框:

img

你也可以試著指定 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]))
        )
}
img

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

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text
作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。