SwiftUI中如何移除视图边框的底边以显示背景？

下面提供两种实用方案，帮你实现只保留上、左、右三边边框，同时保留圆角的效果：

方案一：自定义Shape实现带圆角的三边边框 #

通过自定义Shape类型，手动绘制需要显示的三条边框，同时处理圆角：

struct ThreeSidedBorder: Shape {
    let cornerRadius: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 绘制左上角圆角
        path.addArc(center: CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(180),
                    endAngle: .degrees(270),
                    clockwise: false)
        // 绘制顶边
        path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY))
        // 绘制右上角圆角
        path.addArc(center: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(270),
                    endAngle: .degrees(0),
                    clockwise: false)
        // 绘制右边
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // 绘制左边
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        // 连接回左上角圆角起点
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        
        return path
    }
}

// 使用示例
struct SwiftUIView: View {
    var body: some View {
        Text("Hello World!")
            .padding(10.0)
            .overlay(
                ThreeSidedBorder(cornerRadius: 4.0)
                    .stroke(Color.blue, lineWidth: 3.0)
            )
    }
}

该方案通过精确控制绘制路径，只渲染需要的三边，完全隐藏底边，同时保留顶部的两个圆角，适配你的需求。

方案二：多Overlay叠加实现（直观易调整） #

如果不想自定义Shape，可以通过三个独立的Rectangle分别模拟三条边框，灵活设置对应位置的圆角：

struct SwiftUIView: View {
    var body: some View {
        Text("Hello World!")
            .padding(10.0)
            // 添加顶边边框
            .overlay(alignment: .top) {
                Rectangle()
                    .frame(height: 3.0)
                    .cornerRadius(4.0, corners: [.topLeft, .topRight])
                    .foregroundColor(.blue)
            }
            // 添加左边边框
            .overlay(alignment: .leading) {
                Rectangle()
                    .frame(width: 3.0)
                    .cornerRadius(4.0, corners: .topLeft)
                    .foregroundColor(.blue)
            }
            // 添加右边边框
            .overlay(alignment: .trailing) {
                Rectangle()
                    .frame(width: 3.0)
                    .cornerRadius(4.0, corners: .topRight)
                    .foregroundColor(.blue)
            }
    }
}

这种方式不需要额外定义类型，每个边框独立可控，适合快速调整边框样式的场景。

两种方案都能实现“移除底边边框、露出背景”的需求，你可以根据项目复用性和调整需求选择合适的方案。

内容的提问来源于stack exchange，提问作者Z S