质疑SwiftUI中间隔器的动态性

Question

我从多个地方听说间隔是动态的/相对于不同的屏幕大小。我一直用他们作为我的布局的一个重要部分，但他们让我失望。有人能给我看一下如果我用错了吗？下面是一个矩形的例子，它的上方有一个HStack的正方形。由于矩形开始很大，而且我也需要将它向下推到屏幕上，所以我使用了大量的间隔(这似乎是不必要的)。我试过用填充物，但它并没有像我所需要的那样往下推。在我提供的代码之后，您将看到两张图片。一个是iPod触摸(第7代)，另一个是iPhone 12 Pro Max。设备之间的布局根本不匹配。我的目标是让这两种设备都具有iPod触摸所具有的布局端口部分。

ZStack {
        VStack {
            ForEach(1..<38)  { _ in
                Spacer()
            }
            Rectangle()
                .fill(Color.blue)
        }
        VStack {
            Spacer()
            Spacer()

            HStack {
                Rectangle()
                    .scaledToFit()
                Rectangle()
                    .scaledToFit()
                Rectangle()
                    .scaledToFit()
                Rectangle()
                    .scaledToFit()
                Rectangle()
                    .scaledToFit()
            }

            Spacer()
        }
    }

​

​

Answer 1

您不需要多个Spacer()

GeometryReader { geometry in
    VStack {
        Spacer()
        
        VStack {
            HStack {
                ForEach(0..<5) {_ in
                    Rectangle()
                        .scaledToFit()
                }
            }
            .padding(.vertical)
            
            Spacer()
        }
        .background(Color.blue)
        .frame(height: geometry.size.height * 0.4)
    }
}

这就是你想要达到的目标吗？如果你知道蓝色背景的视图的大小，我现在把它作为屏幕高度的40%，然后Spacer()会用空间填充屏幕的其余部分。

Answer 2

你的问题不太清楚你想要什么样的布局。所以这段代码是基于我对你问题的推测，我不太明白。

import SwiftUI

struct LayoutView: View {
  var body: some View {
    ZStack {
      VStack {
        Rectangle().fill(Color.white)
        ZStack {
          Rectangle().fill(Color.blue)
          VStack {
            HStack {
              Rectangle().scaledToFit()
              Rectangle().scaledToFit()
              Rectangle().scaledToFit()
              Rectangle().scaledToFit()
              Rectangle().scaledToFit()
            }
            .offset(x: 0, y: 50)
            Spacer()
          }
        }
      }
    }
  }
}

struct LayoutView_Previews: PreviewProvider {
  static var previews: some View {
    LayoutView()
      .previewDevice(.some(.init(rawValue: "iPhone 12 Pro Max")))
    LayoutView()
      .previewDevice(.some(.init(rawValue: "iPod touch (7th generation)")))
  }
}