CAGradientLayer不生效，视图仍显示纯色问题求助

尝试给文本视图底部的unreadIndicatorView添加从透明到白色的轴向渐变，但实际该视图仍显示纯色。已在viewDidAppear()中调用渐变设置代码，确保视图frame已完成计算，项目采用自动布局。

相关代码如下：

class TermsAndConditionViewController: UIViewController, NavigationBarToggling {
    @IBOutlet weak var tncContentView: UIView!
    @IBOutlet weak var tncTextView: UITextView!
    @IBOutlet weak var declineButton: AeonButton!
    @IBOutlet weak var acceptButton: AeonButton!
    @IBOutlet weak var unreadIndicatorView: UIView!
    @IBOutlet weak var unreadLabel: UILabel!
    
    let isNavigationBarHidden: Bool = false
    let disposeBag = DisposeBag()
    lazy var segueManager: SegueManager = {
        return SegueManager(viewController: self)
    }()
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        segueManager.prepare(for: segue)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        title = "Terms & Conditions"
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        setupGradientUnreadIndicator()
    }
    
    private func setupViews() {
        tncContentView.addCorner(radius: 8)
        tncContentView.addBorder(width: 1, color: UIColor.black.withAlphaComponent(0.1).cgColor)
    }
    
    private func setupGradientUnreadIndicator() {
        let gradient = CAGradientLayer()
        gradient.type = .axial
        gradient.colors = [
            R.color.vcSubBgColor()!.withAlphaComponent(0),
            UIColor.white
        ]
        gradient.locations = [0, 1]
        gradient.startPoint = CGPoint(x: 1, y: 0)
        gradient.startPoint = CGPoint(x: 1, y: 1)
        
        gradient.frame = unreadIndicatorView.bounds
        unreadIndicatorView.layer.insertSublayer(gradient, at: 0)
    }
}

问题分析 #

1. 渐变方向设置错误：代码中重复设置了gradient.startPoint，未正确配置endPoint，导致渐变逻辑失效。
2. 颜色类型不匹配：CAGradientLayer的colors属性要求传入CGColor数组，但当前代码传入的是UIColor实例，这会直接导致渐变无法渲染。
3. 视图背景色覆盖渐变：如果unreadIndicatorView有默认背景色（如白色），会完全遮挡下方的渐变层，导致看不到预期效果。
4. 自动布局下frame未同步：即使在viewDidAppear中设置了渐变层frame，后续视图布局变化时，渐变层frame不会自动跟随更新，可能引发显示异常。

解决方案 #

1. 修复渐变方向与颜色类型 #

修改setupGradientUnreadIndicator方法，正确配置渐变参数：

private func setupGradientUnreadIndicator() {
    // 移除已存在的渐变层，避免重复添加
    unreadIndicatorView.layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
    
    let gradient = CAGradientLayer()
    gradient.type = .axial
    gradient.colors = [
        R.color.vcSubBgColor()!.withAlphaComponent(0).cgColor,
        UIColor.white.cgColor
    ]
    gradient.locations = [0, 1]
    gradient.startPoint = CGPoint(x: 1, y: 0)
    gradient.endPoint = CGPoint(x: 1, y: 1) // 修正为endPoint
    
    gradient.frame = unreadIndicatorView.bounds
    unreadIndicatorView.layer.insertSublayer(gradient, at: 0)
}

2. 设置视图背景色为透明 #

在setupViews方法中添加：

unreadIndicatorView.backgroundColor = .clear

3. 处理自动布局下的frame更新 #

重写viewDidLayoutSubviews方法，确保渐变层frame跟随视图变化：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 更新渐变层frame
    unreadIndicatorView.layer.sublayers?.forEach {
        if $0 is CAGradientLayer {
            $0.frame = unreadIndicatorView.bounds
        }
    }
}

或者保存渐变层引用，直接更新：

private var unreadGradientLayer: CAGradientLayer?

private func setupGradientUnreadIndicator() {
    // ... 其他代码 ...
    unreadGradientLayer = gradient
    unreadIndicatorView.layer.insertSublayer(gradient, at: 0)
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    unreadGradientLayer?.frame = unreadIndicatorView.bounds
}

内容的提问来源于stack exchange，提问作者Bawenang Rukmoko Pardian Putra