根据背景应用阴影

Question

我试图理解为什么在使用“透明”颜色与使用“蓝色”等非透明颜色时，将阴影应用于 SwiftUI 文本视图是不同的。

#Preview {
    VStack {
        Text("Blue box")
            .background(.blue)
            // adds drop shadow to the bounding rectangle
            .clipped()
            .shadow(color: .black, radius: 2)

        Text("Clear box")
            .background(.clear)
            // adds drop shadow to every letter
            .clipped()
            .shadow(color: .black, radius: 2)

        Spacer()
    }
    .background(.yellow)
    .padding()
}

上面的代码产生了这个

Answer 1

如果您注释掉修饰符

.clipped()

，那么蓝色版本中的字母也会有阴影，背景也会有阴影：

Text("Blue box")
    .background(.blue)
    // .clipped()
    .shadow(color: .black, radius: 2)

作为一般规则，如果您希望阴影位于背景周围，则需要将其应用于背景本身：

Text("Blue box")
    .background{
        Color.blue
            .shadow(color: .black, radius: 2)
    }
    // .clipped()

至于为什么

.clipped()

修改器对清晰版本没有影响，似乎修改器移动了背景后面字母的阴影。由于背景清晰，字母的阴影清晰可见。您可以通过将背景更改为半透明来确认这一点：

VStack(spacing: 20) {
    Text("Opacity 0.0")
        .background(.white.opacity(0.0))
        .clipped()
        .shadow(color: .black, radius: 2)
    Text("Opacity 0.1")
        .background(.white.opacity(0.1))
        .clipped()
        .shadow(color: .black, radius: 2)
    Text("Opacity 0.5")
        .background(.white.opacity(0.5))
        .clipped()
        .shadow(color: .black, radius: 2)
    Text("Opacity 1.0")
        .background(.white.opacity(1.0))
        .clipped()
        .shadow(color: .black, radius: 2)
    Spacer()
}
.background(.yellow)
.padding()