SwiftUI中如何防止阴影覆盖其他视图？

要让阴影处于所有视图后方且不重叠，核心思路是将阴影单独放在最底层容器，实际交互的内容视图放在上层，这样阴影不会被内容视图遮挡，也不会出现跨视图的阴影重叠问题。

实现代码 #

import SwiftUI

struct TestBackgroundView: View {
    @State private var isBottomButtonPressed = false

    var body: some View {
        ZStack {
            // 1. 阴影层：所有阴影都在这里，处于最底层
            VStack(spacing: 0) {
                // 顶部视图的阴影
                Color.clear
                    .frame(height: 80)
                    .shadow(color: .red, radius: 40)
                
                // 底部按钮的阴影（随按压状态变化）
                Color.clear
                    .frame(height: 80)
                    .shadow(color: isBottomButtonPressed ? .darkGray : .red, radius: 40)
            }

            // 2. 内容层：实际的交互视图（按钮），可动态修改背景
            VStack(spacing: 0) {
                Button(action: {}) {
                    Color.white.frame(height: 80)
                }

                Button(action: {}) {
                    Group {
                        if isBottomButtonPressed {
                            Color.black.opacity(0.8).frame(height: 80)
                        } else {
                            Color.white.frame(height: 80)
                        }
                    }
                }
                // 监听按钮按压状态
                .simultaneousGesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { _ in isBottomButtonPressed = true }
                        .onEnded { _ in isBottomButtonPressed = false }
                )
            }
        }
    }
}

#Preview {
    TestBackgroundView()
}

关键说明 #

• 阴影层用Color.clear：clear不会遮挡上层内容，但依然会基于自身frame生成阴影，完美解决你之前用白色背景导致的动画冲突问题。
• 分层管理：阴影统一在最底层，内容视图在上方，所有阴影自然处于所有交互元素的后方，不会出现重叠覆盖。
• 按压状态适配：阴影颜色可以随按钮按压状态动态修改，完全满足你的实际需求。

备选方案：单个视图独立嵌套ZStack #

如果需要更精细化的控制（比如每个视图的阴影只属于自己且在自身下方），可以给每个视图单独嵌套ZStack：

VStack(spacing: 0) {
    ZStack {
        Color.clear.frame(height: 80).shadow(color: .red, radius: 40)
        Button(action: {}) { Color.white.frame(height: 80) }
    }

    ZStack {
        Color.clear.frame(height: 80).shadow(color: isPressed ? .darkGray : .red, radius: 40)
        Button(action: {}) { 
            isPressed ? Color.black.opacity(0.8).frame(height: 80) : Color.white.frame(height: 80) 
        }
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false }
        )
    }
}

这种方式下，每个视图的阴影被限制在自身ZStack的底层，不会干扰其他视图的显示层级。

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