不同设备上的 SwiftUI 按钮 space

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) 应用到整个按钮，但结果是按钮区域溢出了按钮本身：

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

Answer 1

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

不同设备上的 SwiftUI 按钮 space

SwiftUI button space on different devices

uibutton

swiftui