如何将CAGradientLayer转换为匹配效果的SwiftUI渐变视图？

要完全复刻你原有的CAGradientLayer效果，需要对应处理颜色、位置、变换、尺寸这几个关键参数，你之前的SwiftUI代码缺少了对原图层变换、位置和颜色分布的精确还原，以下是完整的实现：

完整SwiftUI代码 #

struct GradientBackground: View {
    var body: some View {
        LinearGradient(
            gradient: Gradient(stops: [
                // 完全对应原UIColor的RGB值
                Gradient.Stop(
                    color: Color(red: 0.165, green: 0.224, blue: 0.314),
                    location: 0.45
                ),
                Gradient.Stop(
                    color: Color(red: 0.112, green: 0.17, blue: 0.26),
                    location: 1.0
                )
            ]),
            // 复用原图层的起始/结束点
            startPoint: CGPoint(x: 0.25, y: 0.5),
            endPoint: CGPoint(x: 0.75, y: 0.5)
        )
        // 对应原图层bounds向外扩展0.5倍宽高的设置
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .scaleEffect(x: 2, y: 2)
        // 直接应用原图层的仿射变换
        .transform(CGAffineTransform(a: 0, b: 0.46, c: -0.46, d: 0, tx: 0.73, ty: 0.68))
        // 对应原图层position设置为视图中心
        .position(CGPoint(x: 0.5, y: 0.5))
        // 避免安全区裁剪，和原图层添加到layer的效果一致
        .ignoresSafeArea()
    }
}

关键参数对应说明 #

• 颜色匹配：直接使用原UIColor的RGB值创建SwiftUI Color，避免自定义颜色名带来的色差
• 颜色位置：通过Gradient.stops精确设置location为0.45和1.0，对应原图层的locations属性
• 渐变方向：复用原图层的startPoint和endPoint，保证渐变的初始方向一致
• 尺寸扩展：原图层通过bounds.insetBy将尺寸扩大为原视图的2倍，这里用scaleEffect(x:2, y:2)实现
• 变换效果：直接将原图层的仿射变换传入transform修饰符，完全复刻旋转、缩放、偏移效果
• 位置对齐：用position(CGPoint(x:0.5, y:0.5))将渐变视图对齐到父视图中心，对应原图层的position设置

你原有代码的问题 #

1. 使用自定义颜色名BackgroundNEWTop/BackgroundNEWBottom，无法保证和原RGB值完全一致
2. 未设置颜色位置，默认均匀分布渐变，和原图层locations的非均匀分布不符
3. 没有处理原图层的仿射变换和尺寸扩展，导致渐变的方向、范围和原效果差异巨大

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