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

【问题标题】：How do I prevent SwiftUI View from taking up any space?如何防止 SwiftUI View 占用任何空间？
【发布时间】：2022-08-19 21:33:53
【问题描述】：

我对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 等于 position，我们会在线上创建一个圆，或者如果我们没有创建一条线，那么圆将绘制在其他线之间。

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

我将如何解决这个问题？

代替if i == position{，我们在Circle 上使用opacity 修饰符并将不透明度设置为0，除非它匹配正确的位置。

标签： swift swiftui swift3 swiftui-view

【解决方案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 !!
            }
        }
    }
}

【讨论】：

那么这样一来，每个 ZStack 的高度都会是 4？
要在行必须具有相同高度（以任何方式）的情况下看起来很规则，所以这是一种选择，另一种可能是使 Circle 不被有条件地删除但有条件地隐藏（否则你的行和 w/o 有不同的高度） .