如何在SwiftUI中实现椭圆形状的径向渐变(Radial Gradient)

你可以根据需要兼容的系统版本选择对应的实现方式：

• iOS 16及以上系统可直接调用官方原生API，苹果已经内置了EllipticalGradient组件，直接配置参数即可：

// 原生椭圆径向渐变示例
EllipticalGradient(
    gradient: Gradient(colors: [.yellow, .orange, .red]), // 替换为你设计稿对应的渐变色
    center: .center, // 可调整渐变中心位置
    startRadiusFraction: 0,
    endRadiusFraction: 0.5
)
.frame(width: 300, height: 150) // 设置你需要的椭圆宽高比

• 兼容所有iOS版本的通用方案：利用RadialGradient的自动拉伸特性，给正圆径向渐变设置非等宽高的容器，渐变会自动跟随容器比例变形为椭圆形态：

// 全版本兼容示例
RadialGradient(
    gradient: Gradient(colors: [.yellow, .orange, .red]),
    center: .center,
    startRadius: 0,
    endRadius: 150 // 按长边尺寸设置即可
)
.frame(width: 300, height: 150) // 宽高比2:1，正圆渐变会自动拉伸为椭圆
.clipShape(Ellipse()) // 若需要外层轮廓也为椭圆可添加此行

• 需要精准控制渐变参数的场景可封装Core Animation的CAGradientLayer实现，灵活度最高：

struct EllipticalGradientView: UIViewRepresentable {
    var colors: [UIColor] // 传入渐变色组
    var center: CGPoint = CGPoint(x: 0.5, y: 0.5) // 渐变中心
    var aspectRatio: CGFloat = 2 // 椭圆宽高比
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .clear
        let gradientLayer = CAGradientLayer()
        gradientLayer.type = .radial
        gradientLayer.colors = colors.map(\.cgColor)
        gradientLayer.startPoint = center
        // 通过endPoint控制椭圆比例
        gradientLayer.endPoint = CGPoint(x: 1, y: 1/aspectRatio)
        view.layer.addSublayer(gradientLayer)
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let gradientLayer = uiView.layer.sublayers?.first as? CAGradientLayer else { return }
        gradientLayer.frame = uiView.bounds
    }
}

// 调用示例
EllipticalGradientView(colors: [.yellow, .orange, .red], aspectRatio: 2)
    .frame(width: 300, height: 150)

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