Пространство кнопок 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 кнопка выглядит хорошо:

On the iPhone 8 plus, on the other side, it doesn't have any padding at the bottom, resulting "collapsed" into the bottom of the screen:

I tried to apply .padding(.bottom) to the whole button but the result is that the area for the button overflows the button itself:

введите описание изображения здесь

Таким образом, пользователь может щелкнуть пустое пространство за пределами кнопки и внутри синей области и по-прежнему активировать ее эффект. Есть ли способ исправить это?

Answer 1

Используйте модификатор .offset(y: -20) для кнопки, он не увеличивает площадь кнопки, а перемещает кнопку вверх.