不同设备上的SwiftUI按钮空间

Question

我在应用程序的最底部定义了一个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)应用于整个按钮，但结果是按钮的区域溢出了按钮本身：

通过这种方式，用户实际上可以单击按钮外部和蓝色区域内部的空白，并且仍会触发其效果。有办法解决这个问题吗？

Answer 1

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