如何在 SwiftUI 中仅在底部创建阴影[关闭]

Question

我正在尝试在 SwiftUI 中创建仅出现在矩形下半部分下方的阴影效果。 当前代码：

struct ContentView: View {
    var body: some View {
        Rectangle() 
            .fill(Color.blue) // Fill the rectangle with blue color
            .frame(width: 200, height: 100) // Set the rectangle's dimensions
            .shadow(radius: 10) // This applies shadow to the entire rectangle
    }
}

问题： 在上面的代码中，阴影应用于整个矩形。但是，我只想让阴影显示在矩形的下半部分下方。

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
                            // .offset(y: 5)
                            // .padding(.top, 3) // <- modifiers here can be used for additional control
                    }
                    .shadow(radius: 3, y: 10)
            }

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