The Util Designer
SwiftUI 做圓形相框
xcode 13.3.1, swift 5.5, iOS 15.4
2022-08-10
圓形相框現在在很多App都會用到，這篇會介紹在SwiftUI 可以很簡單的做出圓形相框。
1. 用Image先顯示需要的圖片。
struct ImageExample : View {
    var body: some View {
        Image("cat")
            .resizable()
            .scaledToFit()
    }
}
2. 使用overlay在原有圖片上面疊加一個圓形的外框。
struct ImageExample5 : View {
    var body: some View {
        Image("cat")
            .resizable()
            .scaledToFit()
            .overlay(
                Circle()
                    .inset(by: 5)
                    .stroke(.gray, lineWidth: 10)
            )
    }
}
3. 最後使用clipShape把相框外多餘的相片去掉就可以了。
struct ImageExample : View {
    var body: some View {
        Image("cat")
            .resizable()
            .scaledToFit()
            .overlay(
                Circle()
                    .inset(by: 5)
                    .stroke(.gray, lineWidth: 10)
            )
            .clipShape(
                Circle()
            )
    }
}