CGRect与渐变子层无法同时显示，仅能二选一的技术问题

嘿，这个问题我之前也碰到过！咱们来一步步搞定它～

问题原因分析 #

你现在的核心问题是Core Graphics的绘制时机和CALayer的渲染顺序没配合好：

• 如果你用UIGraphicsGetCurrentContext()绘制矩形的代码不是在视图的draw(_:)方法里执行的，这个上下文其实是临时的，绘制的矩形不会被持久化到视图的layer内容中；
• 单独绘制时，你可能是在正确的时机（比如draw(_:)）执行的，所以能显示；但添加渐变层后，渐变层作为sublayer正常显示，而之前的矩形因为没被正确保存，就看不到了；
• 反过来，如果矩形绘制时机错误，渐变层正确添加，自然只能看到渐变层。

解决方案 #

方案1：把Core Graphics绘制放到正确时机（推荐） #

将矩形绘制代码移到视图的draw(_:)方法中，这样绘制内容会成为layer的contents；然后在视图初始化或viewDidLoad中添加渐变层（插入到sublayers最底层），这样渲染顺序是渐变层先画（背景），再显示layer自身的内容（矩形在前景）。

修改后的代码示例：

// 自定义视图的draw方法
override func draw(_ rect: CGRect) {
    super.draw(rect)
    guard let ctx = UIGraphicsGetCurrentContext() else { fatalError() }
    ctx.setFillColor(red: 1, green: 0.5, blue: 0.5, alpha: 1)
    let segment1 = CGRect(x: 20, y: 110, width: 30, height: 10)
    ctx.fill(segment1)
}

// 在视图初始化方法中添加渐变层
override init(frame: CGRect) {
    super.init(frame: frame)
    setupGradientLayer()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupGradientLayer()
}

private func setupGradientLayer() {
    let gradient = CAGradientLayer()
    gradient.frame = bounds
    gradient.colors = [
        UIColor(displayP3Red: 0.29, green: 0.56, blue: 1.0, alpha: 1).cgColor,
        UIColor(displayP3Red: 0.23, green: 0.19, blue: 0.8, alpha: 1).cgColor
    ]
    layer.insertSublayer(gradient, at: 0)
}

方案2：用CAShapeLayer替代Core Graphics画矩形 #

如果你不想使用draw(_:)方法，也可以把矩形做成一个CAShapeLayer，这样两个layer都属于sublayers，直接控制顺序即可：

private func setupAllLayers() {
    // 添加渐变层到最底层
    let gradient = CAGradientLayer()
    gradient.frame = bounds
    gradient.colors = [
        UIColor(displayP3Red: 0.29, green: 0.56, blue: 1.0, alpha: 1).cgColor,
        UIColor(displayP3Red: 0.23, green: 0.19, blue: 0.8, alpha: 1).cgColor
    ]
    layer.insertSublayer(gradient, at: 0)
    
    // 添加矩形layer到上层
    let rectLayer = CAShapeLayer()
    let segment1 = CGRect(x: 20, y: 110, width: 30, height: 10)
    rectLayer.path = UIBezierPath(rect: segment1).cgPath
    rectLayer.fillColor = UIColor(red: 1, green: 0.5, blue: 0.5, alpha: 1).cgColor
    layer.addSublayer(rectLayer) // 默认添加到最上层，也可以用insertSublayer(_:above:)指定位置
}

这两种方式都能实现渐变层作为背景、矩形在前景的预期效果，你可以根据自己的代码结构选择更合适的一种～

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