SwiftUI 如何仅为VStack容器的顶部添加阴影效果？

问题原因 #

你当前的实现会出现子元素边缘带阴影的问题，是因为SwiftUI的shadow修饰符默认会沿着视图所有不透明像素的边缘生成投影，你将阴影加在了作为背景的Color上，子元素本身的不透明内容会被识别为投影边界，所以会出现子元素边缘也附带阴影的情况。

解决方案 #

方案1：合并渲染层后裁切阴影

使用compositingGroup将整个VStack及其子元素合并为单个渲染层，阴影只会作用于VStack的整体外轮廓，再通过mask裁切仅保留顶部阴影：

VStack {
    // 此处放置你的子元素：按钮、文本等内容
    Button("示例按钮") { }
    Text("示例文本")
}
.background(Color.white)
.compositingGroup() // 将VStack整体合并为单个渲染层，阴影仅作用于外轮廓
.shadow(color: .red, radius: 10, x: 0, y: 0)
.mask(
    VStack(spacing: 0) {
        // 顶部保留阴影显示区域，高度和阴影radius一致即可
        Rectangle()
            .frame(height: 10)
        // 下方内容区域仅显示内容，不显示阴影
        Rectangle()
            .fill(Color.black)
    }
)

方案2：顶部单独添加阴影层（更轻量）

直接在VStack的背景顶部叠加一个专门生成阴影的透明层，裁切后仅保留顶部阴影，不会影响子元素渲染：

VStack {
    // 此处放置你的子元素：按钮、文本等内容
    Button("示例按钮") { }
    Text("示例文本")
}
.background(
    Color.white
        .overlay(alignment: .top) {
            // 仅在顶部位置生成阴影
            Color.clear
                .frame(height: 0)
                .shadow(color: .red, radius: 10, x: 0, y: 0)
        }
)
.clipped() // 裁切掉VStack范围外的其他方向阴影

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