SwiftUI如何为阴影添加模糊效果及实现Spread扩展参数

参数对应关系说明 #

• Figma的Blur参数直接对应SwiftUI原生shadow的radius参数
• Figma的16%透明度黑色对应Color.black.opacity(0.16)
• SwiftUI原生没有提供Spread参数的直接配置，可通过调整阴影层大小的方式实现该效果

实现方式1：简单适配（仅适用于当前固定spread=-1的场景） #

直接通过padding调整阴影层大小，代码如下：

.background(
    // 阴影层，向内收缩1pt实现spread=-1效果
    Color.newPrimary
        .padding(-1)
        .shadow(color: .black.opacity(0.16), radius: 8, x: 0, y: 4)
        .padding(1)
)
// 顶层正常背景，盖住向内溢出的阴影
.background(Color.newPrimary)

实现方式2：通用扩展（支持任意spread值，后续可复用） #

先给View加自定义shadow扩展，支持spread参数：

extension View {
    /// 适配Figma阴影参数，支持Spread配置
    /// - Parameters:
    ///   - spread: 阴影扩展量，正数向外扩展，负数向内收缩
    func shadow(color: Color = .black, radius: CGFloat, x: CGFloat = 0, y: CGFloat = 0, spread: CGFloat = 0) -> some View {
        self.background(
            GeometryReader { geo in
                let scaleRate = 1 + (spread * 2) / min(geo.size.width, geo.size.height)
                self
                    .scaleEffect(scaleRate)
                    .shadow(color: color, radius: radius, x: x, y: y)
            }
        )
        .overlay(self)
    }
}

调用时代码和Figma参数完全对应即可：

.background(Color.newPrimary
    .shadow(color: .black.opacity(0.16), radius: 8, x: 0, y: 4, spread: -1)
)

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