如何防止 SwiftUI View 占用任何空间？

Question

我对 SwiftUI 很陌生，并且正在研究这个小项目。 我想根据位置变量将图像放置在行的顶部或行之间。

struct ContentView: View {
   @State var position = 5

   var body: some View {
        VStack(spacing: 20){
            ForEach(1...15, id: \.self){i in
                ZStack{
                    if i%2 != 0{
                        Rectangle()
                            .frame(height: 4)
                            .foregroundColor(.white)
                    }
                    if i == position{
                        Circle()
                            .frame(height: 30)
                            .foregroundColor(.white)
                    }
                }
            }
        }
    }
}

这是结果：

内容视图图像

如果 i 是奇数，我们创建一条线。 如果 i 等于位置，我们会在线上创建一个圆圈，或者如果我们没有创建一条线，则将在其他线之间绘制圆圈。

我的问题是当我改变位置的值时线条不会保持静止。 这是因为圆圈占用空间并将线条推离它。 当圆圈位于两条线之间时，圆圈上方和下方的线条会被推得更多，这会导致线条在我从线条之间变为线条顶部时来回移动。

我将如何解决这个问题？

Answer 1

这里有两个问题：行的高度不恒定（因为有圆形和无圆形的行有不同的高度）和条件布局（没有矩形给出不同的布局）。

这是一个可能的解决方案。 使用 Xcode 13.4 / iOS 15.5 测试

struct ContentView: View {
   @State var position = 4

   var body: some View {
        VStack(spacing: 20){
            ForEach(1...15, id: \.self){i in
                ZStack {
                    Rectangle()
                        .frame(height: 4)
                        .foregroundColor(i%2 == 0 ? .clear : .white)  // << here !!
                    if i == position{
                        Circle()
                            .foregroundColor(.white)
                            .frame(height: 30)
                    }
                }.frame(height: 4)    // << here !!
            }
        }
    }
}