无法将内部视图添加到 SwiftUI 视图

Question

我见过有关此问题的各种问题，但似乎没有人回答在 SwiftUI 视图中使用内部阴影和投影。

假设一个视图（我用 Shape 子类

RoundRectangle

来表示）。因为它是一个 Shape，所以我可以像这样简单地添加内部阴影和投影：

#Preview {
    VStack {
        RoundedRectangle(cornerRadius: 10)
            // inner shadow
            .fill(.shadow(.inner(color: .white, radius: 1, y: -1)))
            .frame(width: .infinity, height: 100)
            // drop shadow
            .shadow(radius: 10)
        Spacer()
    }
    .background(.yellow)
    .padding()
}

上面的代码产生这样的结果：

现在，如果有人有

Text

视图怎么办？可以简单地应用阴影，但内部阴影则不然，因为

Text

不是

Shape

并且无法调用 .fill。我见过使用

.overlay

的解决方案，但这些解决方案采用类似

Rectangle

的形状。此外，他们假设形状的颜色不清晰（例如.红色或.蓝色）。

#Preview {
    VStack {
        Text("View")
            .background(.blue)
            .overlay(alignment: .center) {
                Rectangle()
                    .fill(.shadow(.inner(color: .white, radius: 1, y: -1)))
            }
            .frame(width: .infinity, height: 100)
        Spacer()
    }
    .background(.yellow)
    .padding()
}

事实上，这段特定代码中的覆盖并没有真正起作用：

那么，假设有任何 SwiftUI 视图，如何应用

.fill(.shadow(.inner(radius:)))

来创建内部阴影？

Answer 1

尝试将内部阴影添加到蓝色背景。

顺便说一句，

.infinity

作为

width

无效（控制台中有错误），但您可以将其用于

maxWidth

。

Text("View")
    .background(
        .blue
            .shadow(.inner(color: .white, radius: 1, y: -1))
     )
    .frame(maxWidth: .infinity)
    .frame(height: 100)