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


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

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

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

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

rounded border button - swiftui

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

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

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

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

img

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

img

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

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文SwiftUI Tip: Drawing a Border with Rounded Corners for Buttons and Text

軟件工程師,AppCoda 創辦人。著有《iOS 10 App 程式設計實力超進化實戰攻略》、《iOS 9 App 程式設計實力超進化實戰攻略》、《養成iOS 8 App程式設計實力的25堂課》,以及《iOS 8 App程式設計進階實力的30項關鍵技巧》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This