使用居中视图下的可用空间

Question

我尝试过 VStack 和 Spacer。 GeometryReaders 看起来确实有点矫枉过正，我无法用 AlignmentGuides 解决这个问题。

我想将蓝色方块内容保留在中间的正中心，并在剩余空间的下方放置一个菜单。 我所做的一切都会将蓝色方块推高。 实现这种布局的最佳方法是什么？

import SwiftUI

struct Test: View {
  @StateObject private var gameState = GameState()
  
  var body: some View {
    // Blue Square
    VStack {
      Rectangle()
        .fill(Color.blue)
        .aspectRatio(1, contentMode: .fit)
        .frame(maxWidth: .infinity)
      .ignoresSafeArea(.all)
    }
  }
}

#Preview {
  Test()
}

Answer 1

您需要做的就是找到一些自然扩展以填充空间的视图，并将它们放在蓝色内容之前和之后。添加这些不会改变蓝色内容的位置，因为两个“贪婪”视图将占用相同的空间。

然后，您可以将按钮作为叠加层放在第二个“贪婪”视图上。

Color

s 和

Shape

s 是“贪婪”的，所以这里我使用

Color.clear

作为蓝色内容的顶部，并使用描边

Rectangle

作为蓝色内容的底部。

VStack {
    Color.clear
    Rectangle()
        .fill(Color.blue)
        .aspectRatio(1, contentMode: .fill)
        .frame(maxWidth: .infinity)
        .ignoresSafeArea(.all)
    Rectangle().stroke(.red, lineWidth: 10)
        .overlay {
            VStack {
                Button("Button 1") {}
                Button("Button 2") {}
            }
        }
}

输出：