SwiftUI如何为带内边距的视图设置不同圆角半径并添加边框描边？

不管是SwiftUI还是UIKit，核心思路都是自定义圆角路径，再基于路径实现描边和内边距适配，以下是两种框架的具体实现：

SwiftUI 实现方式 #

SwiftUI没有直接支持多角不同圆角的原生Modifier，需要自定义Shape生成路径，再结合clipShape和overlay实现裁剪与描边，同时保留内边距：

1. 自定义圆角Shape #

struct CustomRoundedCorner: Shape {
    var topLeft: CGFloat = 0.0
    var topRight: CGFloat = 0.0
    var bottomLeft: CGFloat = 0.0
    var bottomRight: CGFloat = 0.0

    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.width
        let height = rect.height
        
        // 从右下角开始逐个绘制圆角路径
        path.move(to: CGPoint(x: width - bottomRight, y: height))
        path.addArc(center: CGPoint(x: width - bottomRight, y: height - bottomRight), 
                    radius: bottomRight, 
                    startAngle: .degrees(90), 
                    endAngle: .degrees(0), 
                    clockwise: false)
        
        path.addLine(to: CGPoint(x: topRight, y: height))
        path.addArc(center: CGPoint(x: topRight, y: height - topRight), 
                    radius: topRight, 
                    startAngle: .degrees(0), 
                    endAngle: .degrees(-90), 
                    clockwise: false)
        
        path.addLine(to: CGPoint(x: 0, y: topLeft))
        path.addArc(center: CGPoint(x: topLeft, y: topLeft), 
                    radius: topLeft, 
                    startAngle: .degrees(-90), 
                    endAngle: .degrees(180), 
                    clockwise: false)
        
        path.addLine(to: CGPoint(x: width - bottomLeft, y: 0))
        path.addArc(center: CGPoint(x: width - bottomLeft, y: bottomLeft), 
                    radius: bottomLeft, 
                    startAngle: .degrees(180), 
                    endAngle: .degrees(90), 
                    clockwise: false)
        
        path.closeSubpath()
        return path
    }
}

2. 组合使用实现效果 #

给内容添加内边距后，用自定义Shape裁剪视图，再叠加同一路径的描边：

struct ContentView: View {
    var body: some View {
        Text("带内边距、自定义圆角和描边的文本")
            .padding(20) // 内容内边距
            .background(Color.white)
            .clipShape(CustomRoundedCorner(topLeft: 10, topRight: 30, bottomLeft: 50, bottomRight: 0))
            .overlay(
                CustomRoundedCorner(topLeft: 10, topRight: 30, bottomLeft: 50, bottomRight: 0)
                    .stroke(Color.blue, lineWidth: 2)
            )
            .padding(20) // 视图外部间距（可选）
    }
}

UIKit 实现方式 #

UIKit中可以通过CAShapeLayer自定义路径，实现任意角的圆角和描边，同时处理内边距布局：

1. 自定义视图类 #

class CustomRoundedView: UIView {
    var borderColor: UIColor = .blue
    var borderWidth: CGFloat = 2
    var contentPadding: UIEdgeInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 清除旧的shape图层
        layer.sublayers?.filter { $0 is CAShapeLayer }.forEach { $0.removeFromSuperlayer() }
        
        // 创建背景填充图层
        let backgroundLayer = CAShapeLayer()
        backgroundLayer.path = customCornerPath().cgPath
        backgroundLayer.fillColor = UIColor.white.cgColor
        layer.addSublayer(backgroundLayer)
        
        // 创建描边图层
        let borderLayer = CAShapeLayer()
        borderLayer.path = customCornerPath().cgPath
        borderLayer.strokeColor = borderColor.cgColor
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.lineWidth = borderWidth
        layer.addSublayer(borderLayer)
        
        // 调整子视图到内边距范围内
        subviews.forEach { $0.frame = bounds.inset(by: contentPadding) }
    }
    
    // 生成自定义圆角路径（每个角可单独设置半径）
    private func customCornerPath() -> UIBezierPath {
        let path = UIBezierPath()
        let bounds = self.bounds
        
        // 右下圆角
        let bottomRightRadius: CGFloat = 0
        path.move(to: CGPoint(x: bounds.maxX - bottomRightRadius, y: bounds.maxY))
        path.addArc(withCenter: CGPoint(x: bounds.maxX - bottomRightRadius, y: bounds.maxY - bottomRightRadius), 
                    radius: bottomRightRadius, 
                    startAngle: .pi/2, 
                    endAngle: 0, 
                    clockwise: false)
        
        // 右上圆角
        let topRightRadius: CGFloat = 30
        path.addLine(to: CGPoint(x: bounds.minX + topRightRadius, y: bounds.maxY))
        path.addArc(withCenter: CGPoint(x: bounds.minX + topRightRadius, y: bounds.maxY - topRightRadius), 
                    radius: topRightRadius, 
                    startAngle: 0, 
                    endAngle: -.pi/2, 
                    clockwise: false)
        
        // 左上圆角
        let topLeftRadius: CGFloat = 10
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.minY + topLeftRadius))
        path.addArc(withCenter: CGPoint(x: bounds.minX + topLeftRadius, y: bounds.minY + topLeftRadius), 
                    radius: topLeftRadius, 
                    startAngle: -.pi/2, 
                    endAngle: .pi, 
                    clockwise: false)
        
        // 左下圆角
        let bottomLeftRadius: CGFloat = 50
        path.addLine(to: CGPoint(x: bounds.maxX - bottomLeftRadius, y: bounds.minY))
        path.addArc(withCenter: CGPoint(x: bounds.maxX - bottomLeftRadius, y: bounds.minY + bottomLeftRadius), 
                    radius: bottomLeftRadius, 
                    startAngle: .pi, 
                    endAngle: .pi/2, 
                    clockwise: false)
        
        path.close()
        return path
    }
}

2. 使用自定义视图 #

// 在ViewController中初始化使用
let customView = CustomRoundedView(frame: CGRect(x: 50, y: 100, width: 300, height: 150))
customView.borderColor = .blue
customView.borderWidth = 2
customView.contentPadding = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

// 添加内容子视图
let label = UILabel()
label.text = "带内边距、自定义圆角和描边的文本"
label.textAlignment = .center
customView.addSubview(label)

view.addSubview(customView)

关键注意点 #

• SwiftUI中，overlay的描边路径必须和clipShape的路径完全一致，否则会出现描边错位
• UIKit中，如果需要动态修改圆角半径，可封装方法重新生成路径并更新图层，无需重写整个布局

内容的提问来源于stack exchange，提问作者Dan Selig