Stick button at bottom when keyboard appears

Question

I'm making a screen when I ask the user his name and a Button to the bottom of the page. My problem is, when I'm focusing the Textfield, the keyboard appears but push up the button. How can I stick my button to the bottom of my view and be hidden by the keyboard ?

Before the keyboard appears:

When the keyboard showed up:

Thanks a lot !

Answer 1

You can use .ignoresSafeArea(.keyboard) modifier:

struct ContentView: View {
    @State var text = "Test"
    var body: some View{
        VStack {
            Text("Hello, world")
            Spacer()
            TextField("", text: $text)
            Spacer()
            Button("Submit") {}
        }.ignoresSafeArea(.keyboard)
    }
}

This has to be applied to the surrounding parent stack -- applying it to the Button element alone in the above example has no effect.