SwiftUI: Manipulate spaces between buttons in HStack

Question

I'm implementing an alert view and the alert view has two buttons:

Submit is one button and Cancel is another button but way to close to the center. There is a way to control the position of the buttons?

Here is my implementation:

var body: some View {
    ZStack {
        VStack{
            Text(text)
            TextField("", text: $text, onEditingChanged: {
                self.typing = $0
            }, onCommit: {
                self.text = self.text
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            HStack {
                Button(action: {
                    
                    
                }, label: {
                    Text("Submit")
                })
                Button(action: {
                    
                }, label: {
                    Text("Cancel")
                })
                
            }
        }
        .padding()
        .frame(width: screenSize.width * 0.7, height: screenSize.height * 0.3)
        .background(Color(red: 0.9268686175, green: 0.9416290522, blue: 0.9456014037, opacity: 1))
        .clipShape(RoundedRectangle(cornerRadius: 20.0, style: .continuous))
        .offset(y: isShown ? 0 : screenSize.height)
        .animation(.spring())
        .shadow(color: Color(red: 0.8596749902, green: 0.854565084, blue: 0.8636032343, opacity: 1), radius: 6, x: -9, y: -9)
        
    }
}

Any of you knows how can manipulate the separation of the buttons?

Answer 1

1. You can add spacing in the HStack that the buttons are in:

        HStack(spacing: 20) {
   

2. You can add padding to the buttons:

            Button(action: {
                //action
            }, label: {
                Text("Button")
            })
            .padding(.horizontal, 20)
   

3. You can set the frame of the buttons:

            Button(action: {
                //action
            }, label: {
                Text("Button")
            })
            .frame(width: 100)
   

4. You can add a spacer into the HStack:

            HStack {
                Button...
                Spacer()
                Button...
            }
   

Answer 2

I think a Spacer between two buttons will help you. In your HStack ....

HStack {
 
Button(action: {
                        
                        
                    }, label: {
                        Text("Submit")
                    })
                    Spacer()
                    Button(action: {
                    
                    }, label: {
                        Text("Cancel")
                    })
                    
                }

Answer 3

Adding to the amazing answers above, you can set exact length of spacer using the below code:

HStack {
             Button...
             Spacer().frame(height: 30)
             Button...
}

Adding frame height to spacer will control it not to expand as much as possible ;)