SwiftUI如何让屏幕底部三个按钮更紧凑居中排布

调整padding无法实现按钮收拢的核心原因是底部按钮容器HStack内的两个Spacer()会默认抢占所有横向剩余空间，直接把三个按钮分别顶到屏幕最左、水平居中、最右位置，内边距的调整量远小于Spacer撑开的空间，自然达不到预期效果。

两种方式都可以实现按钮紧凑居中的效果，按需选择即可：

• 方案1：把HStack内的无限填充Spacer改成固定宽度的间距，数值越小按钮越紧凑
  对应修改后的底部HStack代码：

  HStack {
      VStack {
          vehicleButton
          Text("Vehicles")
              .font(.footnote)
              .foregroundColor(.blue)
      }
      // 替换原Spacer()为固定宽度
      Spacer()
          .frame(width: 40)
      VStack {
          animalButton
          Text("Animals")
              .font(.footnote)
              .foregroundColor(.blue)
      }
      // 替换原Spacer()为固定宽度
      Spacer()
          .frame(width: 40)
      VStack {
          faceButton
          Text("Faces")
              .font(.footnote)
              .foregroundColor(.blue)
      }
  }
  .font(.largeTitle)
  .padding(.horizontal)
  

• 方案2：不给内部Spacer做修改，直接限制HStack本身的最大宽度，让整个按钮组自动居中，宽度值越小按钮组越紧凑
  只需要在HStack的修饰符链上加一行frame限制即可：

  HStack {
      // 原有HStack内部代码完全不动，保留原来的两个Spacer即可
  }
  .font(.largeTitle)
  .frame(maxWidth: 320) // 按需调整宽度数值
  .padding(.horizontal)
  

调整时修改对应的宽度数值，就能精准控制三个按钮的紧凑程度，不会出现之前调padding只有微幅变化的问题。

内容的提问来源于stack exchange，提问作者Real Analysis Noob