CAGradientLayer中UIColor显示异常问题求助

先帮你梳理下代码里的核心问题，这些应该就是导致渐变显示异常的主要原因：

1. 变量名不匹配的低级错误 #

你定义的渐变图层是gradient，但最后插入到视图的却是gradient2：

let gradient = CAGradientLayer()
// ... 中间配置代码
self.view.layer.insertSublayer(gradient2, at: 1)

这要么会直接崩溃（如果gradient2根本没定义），要么完全没有渐变图层被添加，自然看不到预期效果。

2. 渐变图层的添加层级错误 #

你现在把渐变图层加到了self.view.layer里，但你的需求是给按钮加渐变，应该把它作为按钮图层的子图层，而且要插在最底层（避免挡住按钮的文字、图标等内容）：

self.button.layer.insertSublayer(gradient, at: 0)

3. 图层尺寸未跟随按钮布局更新 #

你直接用self.button.bounds设置渐变图层的frame，但如果这段代码是在viewDidLoad里执行的，此时按钮的布局还没完成，尺寸大概率不是最终的实际显示尺寸。你需要在视图布局完成后再设置渐变图层的frame：

• 如果是在ViewController里，把渐变的设置代码移到viewDidLayoutSubviews方法中，记得先调用super.viewDidLayoutSubviews()；
• 如果是自定义Button，就移到layoutSubviews方法里。

4. 按钮背景色与圆角的配合问题 #

如果按钮的背景色不是透明的，会直接覆盖掉渐变图层，所以必须把按钮的背景色设为clear：

self.button.backgroundColor = .clear

另外，设置圆角后，要确保按钮开启了clipsToBounds，不然圆角不会生效：

self.button.clipsToBounds = true

（也可以给渐变图层设置maskToBounds = true，不过更推荐给按钮本身设置clipsToBounds，逻辑更统一）

修复后的完整示例代码 #

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // 先移除已存在的渐变图层，避免重复添加
    self.button.layer.sublayers?.forEach {
        if $0 is CAGradientLayer {
            $0.removeFromSuperlayer()
        }
    }
    
    let gradient = CAGradientLayer()
    gradient.frame = self.button.bounds
    gradient.colors = [
        UIColor(red: 238/255, green: 34/255, blue: 84/255, alpha: 1).cgColor,
        UIColor(red: 237/255, green: 144/255, blue: 78/255, alpha: 1).cgColor
    ]
    gradient.startPoint = CGPoint(x: 0.2, y: 0.5)
    gradient.endPoint = CGPoint(x: 0.8, y: 0.5)
    gradient.cornerRadius = self.button.layer.cornerRadius
    gradient.maskToBounds = true // 和按钮的clipsToBounds配合，确保圆角生效
    
    self.button.backgroundColor = .clear
    self.button.clipsToBounds = true
    self.button.layer.insertSublayer(gradient, at: 0)
}

至于你提到的“应用内使用任何颜色都会出现该问题”，大概率也是类似的原因——比如设置的颜色被其他不透明视图覆盖、视图尺寸未正确更新导致颜色显示区域不对，或者图层层级设置错误。

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