如何在 SwiftUI 中为矩形创建底部阴影效果

Question

我正在开发一个 SwiftUI 视图，我想在其中创建一个带有阴影的矩形，该阴影仅出现在矩形的下部。在我的设计中，阴影应该看起来像淋浴效果，并限制在橙色边框下方的下部。

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .mask(Rectangle().padding(.bottom, 20))
                .border(Color.orange)
            .padding()
   
        Spacer()
    }
}

Answer 1

您需要将阴影添加为叠加层，以便可以对其进行偏移，然后对其进行遮罩。

struct BottomShadow: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .overlay(alignment: .bottom) {
                Color.blue
                    .shadow(radius: 5, y: 5)
                    .mask{
                        Color.black
                            .offset(y: 15)
                    }
            }
   
        Spacer()
    }
}

#Preview {
    BottomShadow()
}

结果是：

如果您调整叠加层的大小、修改器的值和顺序，您还可以发挥创意：

Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .overlay(alignment: .bottom) {
                Color.blue
                    .frame(height: 5)
                    .mask{
                        Color.black
                    }
                    .shadow(radius: 3, y: 10)
            }

这将产生一个有点在空中的阴影，但也会稍微延伸到两侧，而不是像前一个那样被剪切。