SwiftUI中如何让ZStack叠加视图不影响底层视图布局位置

SwiftUI的ZStack容器尺寸由内部所有子视图的最大尺寸决定：

• 没有圆形时，奇数行（线条行）ZStack仅包含4pt高的矩形，高度为4pt；偶数行（间隙行）ZStack为空，高度为0pt，线条位置固定。
• 当某行出现30pt高的圆形时，该行ZStack高度会被撑到30pt，VStack排布时行高发生变化，就会挤压相邻行，导致线条移位。

核心思路：让圆形不参与行容器的尺寸计算，所有行的尺寸保持和无圆形时完全一致，圆形作为浮动覆盖层渲染，不进入正常布局流。
直接利用SwiftUI的overlay修饰符特性：overlay添加的内容不会改变原视图的尺寸，仅作为浮层渲染在原视图上方，代码改动量极小，修改后完整代码如下：

struct ContentView: View {
   @State var position = 5

   var body: some View {
        VStack(spacing: 20){
            ForEach(1...15, id: \.self){i in
                ZStack{
                    // 原有线条逻辑不变，保证ZStack尺寸和无圆形时完全一致
                    if i%2 != 0{
                        Rectangle()
                            .frame(height: 4)
                            .foregroundColor(.white)
                    }
                }
                // 圆形作为overlay浮层，不占用ZStack布局空间
                .overlay {
                    if i == position{
                        Circle()
                            .frame(height: 30)
                            .foregroundColor(.white)
                    }
                }
            }
        }
    }
}

效果说明 #

• 所有行的ZStack尺寸和未加圆形时完全一致：奇数行高4pt，偶数行高0pt，VStack排布完全固定，线条永远不会移位。
• 圆形默认在overlay中居中对齐：奇数行时中心与线条中心重合，实现覆盖在线条上的效果；偶数行时中心与间隙中点重合，刚好落在两条线条的间隙位置。
• 圆形超出ZStack范围的部分可以正常显示、响应交互，不会被自动裁剪。

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