SwiftUI LinearGradient背景模糊在iOS15与iOS16表现不一致求解决方案

问题根源 #

iOS15中SwiftUI对VisualEffectView（模糊视图）和LinearGradient的层叠渲染存在合成逻辑bug，导致渐变颜色显示异常；iOS16修复了该渲染层级问题，因此表现正常。纯色背景不受影响是因为纯色的合成路径与渐变不同。

稳定兼容方案（UIKit封装） #

通过UIViewRepresentable封装原生UIVisualEffectView，将渐变层放在模糊视图的底层，利用UIKit的原生渲染逻辑避开SwiftUI的bug，iOS15/16表现一致。

import SwiftUI

struct BlurredGradientView: UIViewRepresentable {
    let gradientColors: [UIColor]
    let blurStyle: UIBlurEffect.Style
    let gradientStartPoint: CGPoint
    let gradientEndPoint: CGPoint
    
    init(
        colors: [Color],
        blurStyle: UIBlurEffect.Style = .systemUltraThinMaterial,
        startPoint: UnitPoint = .topLeading,
        endPoint: UnitPoint = .bottomTrailing
    ) {
        self.gradientColors = colors.map { UIColor($0) }
        self.blurStyle = blurStyle
        self.gradientStartPoint = CGPoint(x: startPoint.x, y: startPoint.y)
        self.gradientEndPoint = CGPoint(x: endPoint.x, y: endPoint.y)
    }
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: blurStyle)
        let blurView = UIVisualEffectView(effect: blurEffect)
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = gradientColors.map { $0.cgColor }
        gradientLayer.startPoint = gradientStartPoint
        gradientLayer.endPoint = gradientEndPoint
        
        let gradientView = UIView()
        gradientView.layer.addSublayer(gradientLayer)
        gradientView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        blurView.insertSubview(gradientView, at: 0)
        return blurView
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        guard let gradientView = uiView.subviews.first,
              let gradientLayer = gradientView.layer.sublayers?.first as? CAGradientLayer else {
            return
        }
        gradientLayer.colors = gradientColors.map { $0.cgColor }
        gradientLayer.frame = uiView.bounds
    }
}

// SwiftUI使用示例
struct DemoView: View {
    var body: some View {
        BlurredGradientView(
            colors: [.red, .blue],
            blurStyle: .systemUltraThinMaterial,
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .edgesIgnoringSafeArea(.all)
    }
}

纯SwiftUI替代方案（效果可能受限） #

若不想引入UIKit封装，可尝试调整渲染层级强制修正合成逻辑，但该方案在复杂布局下可能仍有异常：

ZStack {
    LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
        .compositingGroup()
        .background(
            VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
                .allowsHitTesting(false)
        )
}
.compositingGroup()
.edgesIgnoringSafeArea(.all)

注意事项 #

• UIKit封装方案是最稳定的选择，完全匹配iOS16的原生效果；
• 自定义渐变方向时，需同步传递startPoint和endPoint参数；
• 测试时需覆盖不同模糊风格（如.systemMaterial、.dark等）确保兼容性。

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