Xcode 16.0中SwiftUI贝塞尔曲线Shape无法填充渐变的问题

问题原因分析 #

1. 修饰符顺序错误：当前代码先调用.stroke再调用.fill，导致渐变填充作用于描边后的线条，而非Shape的内部区域。纯色填充时因视觉覆盖描边看似正常，但渐变无法正确作用于Shape内部。
2. 自定义Shape路径未基于传入的rect：ClosedCurve直接使用绝对CGPoint生成路径，而Shape的path(in:)方法传入的rect是该Shape所在View的可用空间，Xcode 16对渐变填充的路径边界校验更严格，绝对坐标可能导致路径超出View范围或bounds计算错误，进而无法渲染渐变。

修复后的代码 #

方案1：修正修饰符顺序 + 确保路径在View范围内

struct TestGradientPath: View {
    @State private var startPoint: CGPoint = .zero
    @State private var endPoint: CGPoint = .init(x: 0, y: 100)
    @State private var controlPoint: CGPoint = .init(x: 100, y: 0)
        
    var body: some View {
        ClosedCurve(startPoint: startPoint,
                   endPoint: endPoint,
                   controlPoint: controlPoint)
        .fill(
            LinearGradient(
                gradient: Gradient(colors: [.red, .blue]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            // 也可替换为径向渐变
            // RadialGradient(gradient: Gradient(colors: [.red.opacity(0.3), .red.opacity(0)]),
            //               center: .center,
            //               startRadius: 0,
            //               endRadius: 64)
        )
        .stroke(.red, lineWidth: 2)
        .frame(width: 200, height: 200) // 指定View范围，确保路径在范围内
    }
}

struct ClosedCurve: Shape {
    var startPoint: CGPoint
    var endPoint: CGPoint
    var controlPoint: CGPoint
    
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: startPoint)
            path.addQuadCurve(to: endPoint, control: controlPoint)
            path.closeSubpath()
        }
    }
}

#Preview {
    TestGradientPath()
}

方案2：让路径基于rect的相对坐标（更推荐，适配不同View大小）

struct TestGradientPath: View {
    // 使用UnitPoint定义相对位置，适配不同尺寸
    @State private var startPoint: UnitPoint = .topLeading
    @State private var endPoint: UnitPoint = .bottomLeading
    @State private var controlPoint: UnitPoint = .trailing
        
    var body: some View {
        ClosedCurve(startPoint: startPoint,
                   endPoint: endPoint,
                   controlPoint: controlPoint)
        .fill(
            LinearGradient(
                gradient: Gradient(colors: [.red, .blue]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .stroke(.red, lineWidth: 2)
        .frame(width: 200, height: 200)
    }
}

struct ClosedCurve: Shape {
    var startPoint: UnitPoint
    var endPoint: UnitPoint
    var controlPoint: UnitPoint
    
    func path(in rect: CGRect) -> Path {
        // 将相对坐标转换为rect内的绝对坐标
        let start = CGPoint(x: rect.minX + rect.width * startPoint.x, y: rect.minY + rect.height * startPoint.y)
        let end = CGPoint(x: rect.minX + rect.width * endPoint.x, y: rect.minY + rect.height * endPoint.y)
        let control = CGPoint(x: rect.minX + rect.width * controlPoint.x, y: rect.minY + rect.height * controlPoint.y)
        
        Path { path in
            path.move(to: start)
            path.addQuadCurve(to: end, control: control)
            path.closeSubpath()
        }
    }
}

#Preview {
    TestGradientPath()
}

验证结果 #

• 修正修饰符顺序后，渐变会正确填充Shape的内部区域
• 使用相对坐标的方案可以适配不同的View尺寸，避免因绝对坐标导致的渲染问题
• 两种方案在Xcode 16中都能正常渲染LinearGradient和RadialGradient

内容的提问来源于stack exchange，提问作者Zeng Chris