SwiftUI中使用P3色域颜色时LinearGradient显示颜色异常

SwiftUI的LinearGradient依赖Gradient实现时，会自动将P3颜色转换为sRGB空间计算渐变，导致最终显示的颜色饱和度低于设计稿。解决方法是直接使用Core Animation的CAGradientLayer创建P3色域渐变，再包装为SwiftUI可用视图。

实现步骤 #

1. 创建UIViewRepresentable包装类，用于在SwiftUI中展示P3渐变：

import SwiftUI

struct P3LinearGradient: UIViewRepresentable {
    let colors: [UIColor]
    let startPoint: UnitPoint
    let endPoint: UnitPoint
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .clear
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = CGPoint(x: startPoint.x, y: startPoint.y)
        gradientLayer.endPoint = CGPoint(x: endPoint.x, y: endPoint.y)
        gradientLayer.frame = view.bounds
        gradientLayer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.layer.addSublayer(gradientLayer)
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let gradientLayer = uiView.layer.sublayers?.first as? CAGradientLayer else { return }
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = CGPoint(x: startPoint.x, y: startPoint.y)
        gradientLayer.endPoint = CGPoint(x: endPoint.x, y: endPoint.y)
    }
}

2. 定义P3色域的UIColor常量：

extension Constants {
    static let UIColor_Home_BG_BottomLight = UIColor(displayP3Red: 139.0/255.0, green: 197.0/255.0, blue: 226.0/255.0, alpha: 1.0)
    static let UIColor_Home_BG_TopLight = UIColor(displayP3Red: 0.0/255.0, green: 123.0/255.0, blue: 184.0/255.0, alpha: 1.0)
}

3. 在视图中使用自定义P3渐变作为背景：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            // 你的页面内容
        }
        .background(P3LinearGradient(
            colors: [Constants.UIColor_Home_BG_BottomLight, Constants.UIColor_Home_BG_TopLight],
            startPoint: .bottom,
            endPoint: .top
        ))
    }
}

注意事项 #

• 务必用真机测试：iPhone模拟器的色域模拟存在偏差，仅支持P3的iPhone设备（iPhone 8及后续机型）能准确显示P3颜色。
• 统一色彩空间：渐变内所有颜色都要使用displayP3创建，避免色彩断层或饱和度不一致问题。

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