SwiftUI中VStack元素间1px间隙问题（自定义阴影场景）

问题根源 #

你遇到的1px间隙并非VStack spacing设置的问题，而是阴影裁剪逻辑缺陷+亚像素渲染偏差共同导致的：

• 原代码中用负radius设置clipShape会导致视图边缘形状异常，产生视觉间隙
• mask裁剪阴影的范围不够精准，元素边缘残留的阴影与下一个元素的背景形成细微缝隙
• 单独给每个元素添加阴影时，上下阴影的边缘在像素对齐阶段出现偏差

修正后的代码（保留单独阴影控制） #

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            // 顶部元素：保留左右+底部阴影
            Text("Test")
                .padding()
                .background(
                    Color.white
                        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                        .clipped()
                )
                .shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2)
                .addShadow(topPadding: -30, bottomPadding: 0, trailingPadding: -30, leadingPadding: -30)
            
            // 中部元素：仅保留左右阴影
            Text("Test")
                .padding()
                .background(Color.white)
                .shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 0)
                .addShadow(topPadding: 0, bottomPadding: 0, trailingPadding: -30, leadingPadding: -30)
            
            // 底部元素：保留左右+顶部阴影
            Text("Test")
                .padding()
                .background(
                    Color.white
                        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                        .clipped()
                )
                .shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: -2)
                .addShadow(topPadding: 0, bottomPadding: -30, trailingPadding: -30, leadingPadding: -30)
        }
        .fixedSize()
        .background(Color.gray.opacity(0.2))
    }
}

struct MaskModifier: ViewModifier {
    let topPadding: CGFloat
    let bottomPadding: CGFloat
    let trailingPadding: CGFloat
    let leadingPadding: CGFloat
    
    init(
        topPadding: CGFloat,
        bottomPadding: CGFloat,
        trailingPadding: CGFloat,
        leadingPadding: CGFloat
    ) {
        self.topPadding = topPadding
        self.bottomPadding = bottomPadding
        self.trailingPadding = trailingPadding
        self.leadingPadding = leadingPadding
    }
    func body(content: Content) -> some View {
        content
            .mask(
                Rectangle()
                    .padding(.top, topPadding)
                    .padding(.leading, leadingPadding)
                    .padding(.trailing, trailingPadding)
                    .padding(.bottom, bottomPadding)
            )
    }
}

extension View {
    func addShadow(topPadding: CGFloat,
                   bottomPadding: CGFloat,
                   trailingPadding: CGFloat,
                   leadingPadding: CGFloat) -> some View {
        modifier(MaskModifier(topPadding: topPadding, bottomPadding: bottomPadding, trailingPadding: trailingPadding, leadingPadding: leadingPadding))
    }
}

关键修改点 #

1. 修正clipShape参数：移除中部元素的负radius设置，改用纯色背景，避免形状异常
2. 控制阴影方向：给顶部元素阴影加y:2偏移（仅向下扩散），底部元素加y:-2偏移（仅向上扩散），避免上下阴影重叠产生间隙
3. 添加clipped()：确保背景形状边缘无溢出，消除亚像素渲染导致的缝隙
4. 锁定布局尺寸：用fixedSize()固定VStack大小，防止布局拉伸放大间隙

更简洁的替代方案（整体阴影） #

如果不需要单独控制每个元素的阴影，直接将三个元素作为整体处理，彻底规避间隙问题：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("Test").padding()
            Divider() // 可选，按需添加元素分隔线
            Text("Test").padding()
            Divider()
            Text("Test").padding()
        }
        .background(Color.white)
        .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
        .shadow(color: .black.opacity(0.5), radius: 5)
        .background(Color.gray.opacity(0.2))
    }
}

这个方案通过整体添加背景、圆角和阴影，完全消除了元素间的布局间隙，代码更简洁易维护。

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