不同设备上的 SwiftUI 按钮空间答案

【问题标题】：SwiftUI button space on different devices不同设备上的 SwiftUI 按钮空间
【发布时间】：2020-07-10 20:28:27
【问题描述】：

我在应用程序的最底部定义了一个 swiftUI 按钮，如下所示：

VStack {
   Rectangle().foregroundColor(.yellow)
   Button(action: {
     withAnimation(.easeInOut) {
        self.viewModel.resetGame()
     }
   }, label: {
      Text("NEW GAME")
      .fontWeight(.bold)
      .font(.system(size: 22))
      .frame(minWidth: 0, maxWidth: .infinity)
      .padding()
      .background(Color.orange)
      .cornerRadius(40)
      .foregroundColor(.white)
      .padding(10)
      .overlay(
         RoundedRectangle(cornerRadius: 40)
            .stroke(Color.orange, lineWidth: 5)
       )
   })
}

在 iPhone 11 上，按钮看起来不错：

在 iPhone 8 plus 的另一侧，它的底部没有任何填充，导致“折叠”到屏幕底部：

我尝试将.padding(.bottom) 应用于整个按钮，但结果是按钮区域溢出了按钮本身：

这样，用户实际上可以点击按钮外部和蓝色区域内的空白区域并仍然触发其效果。有没有办法解决这个问题？

【问题讨论】：

请提供扩展代码示例，让我们看看按钮顶部的内容。为什么会出现在底部？它是在顶部有 Spacer 的 VStack 中还是其他什么？
@DI.dev 我认为这并不重要，但我将它放在 VStack 中。我更新了我的代码，以便您可以重现我正在谈论的示例。

标签： uibutton swiftui

【解决方案1】：

对按钮使用.offset(y: -20)修饰符，不会增加按钮面积而是向上移动按钮。

【讨论】：

谢谢，成功了！我也只是尝试在按钮定义之后添加一个 Spacer() 并且这也有效。