SwiftUI设置圆角边框

在SwiftUI中，如果使用 border 设置 VStack 视图边框，通常只能设置为直角：

VStack {}
    .padding(8)
    .background(Color(hex: "EEEEEE"))
    .cornerRadius(8)
    .border(.black, lineWidth:2)   // 设置边框
    .cornerRadius(8)

实际上border无法被cornerRadius设置为圆角。

而stroke和strokeBorder又无法修饰VStack等视图。

解决方案

可以使用overlay + RoundedRectangle实现圆角边框：

VStack {}
    .padding(8)
    .background(Color(hex: "EEEEEE"))
    .cornerRadius(8)
    .overlay(
        RoundedRectangle(cornerRadius: 8)
            .stroke(.black, lineWidth: 2) // 设置边框颜色和宽度
    )

在VStack视图上覆盖一个圆角矩形，设置圆角矩形的stroke边框。

这样就可以实现圆角边框的效果。

相关文章

SwiftUI绘制边框stroke和strokeBorder：https://fangjunyu.com/2024/12/15/swiftui%e7%bb%98%e5%88%b6%e8%be%b9%e6%a1%86stroke%e5%92%8cstrokeborder/