SwiftUI中填充颜色影响阴影绘制的原因及解决办法

原因分析 #

UIColor.quaternaryLabel是带透明度的系统颜色（浅色模式下alpha值极低，接近透明）。SwiftUI的shadow渲染逻辑会关联视图本身的透明度：当填充颜色带有alpha通道时，阴影的不透明度会与视图的alpha值相乘，导致阴影被“淡化”甚至几乎不可见。而UIColor.white是完全不透明的，因此阴影能正常显示。

解决方法 #

通过将阴影与填充颜色分层绘制，让阴影基于不透明的形状载体生成，避免填充色的透明度影响阴影：

方案1：用background叠加填充色 #

struct ShadowRectangle: View {
    let color: UIColor
    var body: some View {
        Rectangle()
            .fill(Color.clear) // 透明载体，仅用于生成阴影
            .shadow(color: .red, radius: 5, x: 0, y: 0)
            .background(Color(color)) // 在阴影上方叠加目标填充色
    }
}

方案2：用ZStack分层绘制 #

struct ShadowRectangle: View {
    let color: UIColor
    var body: some View {
        ZStack {
            // 下层：透明形状生成阴影，不受上层填充色影响
            Rectangle()
                .fill(Color.clear)
                .shadow(color: .red, radius: 5, x: 0, y: 0)
            // 上层：叠加带透明度的填充色
            Rectangle()
                .fill(Color(color))
        }
    }
}

两种方案都能让阴影保持完整的透明度，同时正常显示quaternaryLabel的填充效果。

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