如何在不遮盖其文本的情况下向形状叠加层添加投影？斯威夫特用户界面

Question

我有一个可以切换可见性的文本视图。我希望文本显示在具有阴影的 RoundedRectangle 上。

叠加形状的问题在于它必须是不透明的才能投射阴影，因此它会覆盖文本，如您在以下代码片段中所见：

Text("Hello, world!")
    .font(.title)
    .foregroundColor(self.digitalOn ? Color.black : Color.white)
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(color: Color.black.opacity(1), radius: 5, x: 10, y: 10)
    )
    .padding()

没有办法独立于前景控制文本的不透明度或颜色，这对我来说似乎很疯狂。我假设我只是以完全错误的方式解决问题。有人可以纠正我吗？

Answer 1

这是一个解决方案（使用 Xcode 11.4 测试）

Text("Hello, world!")
    .font(.title)
    .foregroundColor(self.digitalOn ? Color.black : Color.white)
    .padding()
    .background(RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
    )
    .compositingGroup()     // << here !!
    .shadow(color: Color.black.opacity(1), radius: 5, x: 10, y: 10) // << shadow to all composition
    .padding()

如何在不遮盖其文本的情况下向形状叠加层添加投影？斯威夫特用户界面

How do you add a drop shadow to a shape overlay without obscuring its text? SwiftUI

text

swiftui

overlay

rounded-corners

dropshadow