這一系列會分享 SwiftUI 中遇到的大大小小，怎麼用各種方式來達成設計師們想要的效果。

iOS 的開發經驗上從 iOS 5/6 開始，經歷 Objective-C 和 Swift ，先從 UIKit 到 SwiftUI 。因此這個系列必要時就會比較在 UIKit 實作的差別。

好，話不多說，開始吧！

圓角外框是什麼

和直線的外框不同，根據設計稿的需求，會有卡片型的外觀，有時候卡片有圓角又有外框時，就需要想辦法加上去。

無法達到目的的 cornerRadius

若是對象是背景，cornerRadius 能夠產生圓角的效果，但是若是要讓外框有圓角，用 border 搭配 cornerRadius 卻無法達到預期的效果。

註： cornerRadius 在 iOS 17 起被標記為 Deprecated ，但是在 Xcode 15 編譯上仍然沒問題。因此請依照實際情形變換呼叫的 API

先 cornerRadius 後 border

Text("我愛鐵人賽")
    .cornerRadius(5)
    .border(.green)

這個寫法並不會讓 border 有圓角

先 border 後 cornerRadius

Text("我愛鐵人賽")
    .border(.green)
    .cornerRadius(5)

這樣寫 border 的邊角的會被 cornerRadius 截掉，當然也不是預期的效果。

解法：利用 overlay 或 background

由於無法直接讓 border 有圓角，所以這時候只能透過 background 或 overlay 將圓角的圖形疊加。

Text("我愛鐵人賽")
    .background { 
        RoundedRectangle(cornerRadius: 5)
            .stroke(.blue, lineWidth: 1)
    }

以這邊的範例，步驟就是

1. 用 RoundedRectangle) 繪製一個圓角矩形
2. 使用 stroke modifier 設定筆畫
3. 設定成 Text 的背景

結果圖：

overlay

使用 overlay 可以達到一樣的效果：

Text("我愛鐵人賽")
    .overlay { 
        RoundedRectangle(cornerRadius: 5)
            .stroke(.blue, lineWidth: 1)
    }

設定進階風格

storke modifier 能夠傳入 StrokeStyle 設定風格，假如需要一個點線的外框，就可以這麼寫

Text("我愛鐵人賽")
    .overlay { 
        RoundedRectangle(cornerRadius: 5)
            .stroke(.blue, style: StrokeStyle(lineWidth: 1, dash: [1]))
    }

結果圖如下：

StorkeStyle 還能有像是 lineCap 和 lineJoin 以及其他等設定，不妨玩玩看能做出什麼效果！

結語

SwiftUI 不像 UIKit 或 CALayer 等設定邊線就可以達成設計上的需求；也不像 CSS 那樣疊加屬性就可以達成。

因此在設定時需要多找解法和多了解 SwiftUI 構成 UI 元件的方式，而這個圓角框的設定的做法是讓我最驚訝的解法之一。

以上就是今天的 SwiftUI 大大小小，明天見！

環境

• Xcode 15 beta 8

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響，因此 Xcode 14 等環境下使用也是沒問題的。

References

• Text
• cornerRadius
• background
• overlay
• stroke()
• StrokeStyle