SwiftUI中VStack视图重叠问题：如何设置占位视图间距？

问题根源 #

GeometryReader的布局特性是尽可能占据父视图的可用空间，若将它作为整个占位视图的外层容器：

• 给内部VStack加.padding(.bottom,24)时，GeometryReader会忽略子视图的padding扩展，导致后续视图向上重叠；
• 直接给GeometryReader加padding时，会压缩占位视图本身的尺寸，导致实际间距偏离24。

解决方案 #

方案1：缩小GeometryReader的作用范围（推荐）

只让GeometryReader包裹需要半宽的Shimmer视图，不要作为整个占位视图的容器，然后给占位视图的外层容器添加bottom padding：

struct PlaceholderView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // 仅给半宽Shimmer添加GeometryReader
            GeometryReader { geo in
                ShimmerEffectBox()
                    .frame(width: geo.size.width / 2, height: 16)
            }
            // 全宽Shimmer
            ShimmerEffectBox()
                .frame(height: 16)
        }
        .padding(.bottom, 24) // 控制占位视图间的间距
    }
}

// ScrollView中使用
ScrollView {
    ForEach(0..<4) { _ in
        PlaceholderView()
    }
    .padding(.horizontal, 16) // 可选：添加左右边距
}

方案2：利用VStack的spacing参数控制间距

如果必须保留GeometryReader作为占位视图的外层容器，可在外层用带spacing的VStack直接控制间距：

ScrollView {
    VStack(spacing: 24) { // 直接设置占位视图间的间距
        ForEach(0..<4) { _ in
            GeometryReader { geo in
                VStack(alignment: .leading, spacing: 12) {
                    ShimmerEffectBox()
                        .frame(width: geo.size.width / 2, height: 16)
                    ShimmerEffectBox()
                        .frame(height: 16)
                }
            }
        }
    }
    .padding(.horizontal, 16)
}

注意事项 #

• 若使用方案1的bottom padding，可通过条件判断移除最后一个占位视图的padding，避免ScrollView底部多出空白：

  ForEach(0..<4) { index in
      PlaceholderView()
          .padding(.bottom, index == 3 ? 0 : 24)
  }
  

• 优先选择缩小GeometryReader的作用范围，减少不必要的布局嵌套，避免GeometryReader的布局特性干扰整体间距计算。

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