如何在SwiftUI中为视图添加仅顶部圆角的边框？

你的问题核心在于：直接用clipShape裁剪视图后再添加stroke，会导致边框的圆角部分被裁剪掉——因为stroke是沿形状边缘绘制，裁剪操作会切掉边框超出视图范围的部分。下面提供两种简洁的原生SwiftUI解决方案：

方法一：叠加自定义圆角形状的描边 #

先裁剪视图内容的圆角，再叠加一个完全匹配的圆角形状作为边框，确保边框和视图圆角完全对齐：

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    // 自定义方法：同时实现圆角裁剪和指定圆角的边框
    func borderedCornerRadius(_ radius: CGFloat, corners: UIRectCorner, borderColor: Color, borderWidth: CGFloat) -> some View {
        self
            .cornerRadius(radius, corners: corners) // 先裁剪视图内容的圆角
            .overlay(
                RoundedCorner(radius: radius, corners: corners)
                    .stroke(borderColor, lineWidth: borderWidth)
            )
    }
}

使用示例 #

VStack {
    Text("仅顶部圆角带边框")
        .padding(.horizontal, 20)
        .padding(.vertical, 12)
        .borderedCornerRadius(16, corners: [.topLeft, .topRight], borderColor: .blue, borderWidth: 2)
        .background(Color.gray.opacity(0.2))
}
.padding()

方法二：调整描边形状的内边距 #

通过inset(by:)让描边形状向内缩小半个边框宽度，避免边框被裁剪操作切掉：

extension View {
    func strokeCornerRadius(_ radius: CGFloat, corners: UIRectCorner, borderColor: Color, borderWidth: CGFloat) -> some View {
        self
            .overlay(
                RoundedCorner(radius: radius, corners: corners)
                    .inset(by: borderWidth / 2) // 让描边形状向内偏移，避免被裁剪
                    .stroke(borderColor, lineWidth: borderWidth)
            )
            .cornerRadius(radius, corners: corners)
    }
}

原理说明 #

stroke默认在形状的边缘居中绘制，所以一半在形状内部，一半在外部。裁剪操作会切掉外部的一半边框，导致圆角处边框缺失。用inset(by: borderWidth/2)让整个描边形状向内收缩，确保所有边框都在裁剪范围内，同时保持圆角的完整性。

内容的提问来源于stack exchange，提问作者bjorn.lau