如何在SwiftUI中仅为矩形底部添加阴影效果

要只给矩形的下半部分添加阴影，你可以通过以下几种方式实现：

方法一：蒙版裁剪阴影 #

通过compositingGroup()把矩形和阴影合并为一个渲染组，再用蒙版遮掉上半部分的阴影：

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .shadow(radius: 10)
            .compositingGroup() // 确保阴影和矩形作为整体被蒙版处理
            .mask(
                VStack(spacing: 0) {
                    Color.clear // 上半部分透明，隐藏阴影
                    Color.black // 下半部分不透明，保留阴影
                }
                .frame(height: 100)
            )
    }
}

如果想要阴影过渡更柔和，把蒙版换成线性渐变即可：

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .shadow(radius: 10)
            .compositingGroup()
            .mask(
                LinearGradient(
                    gradient: Gradient(colors: [.clear, .black]),
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
    }
}

方法二：底层阴影载体 #

在原矩形下方放置一个仅包含下半部分的小矩形，给这个小矩形加阴影，原矩形会自动盖住上半部分的阴影：

struct ContentView: View {
    var body: some View {
        ZStack {
            // 生成阴影的下半部分载体
            Rectangle()
                .frame(width: 200, height: 50)
                .shadow(radius: 10)
                .offset(y: 25) // 与原矩形下半部分对齐
            
            // 原蓝色矩形
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 100)
        }
    }
}

两种方法各有适用场景：第一种适合需要阴影从边缘自然过渡的情况，第二种更直观，方便精确控制阴影的范围。

内容的提问来源于stack exchange，提问作者Moran