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?

There are multiple approaches (like in the solutions below) but choosing one depends on what exactly are you trying to achieve? — pawello2222
– pawello2222, Commented Oct 17, 2020 at 9:22
Agree with @pawello2222. It depends on what you want to final result to be. But adding spacing to hstack or spacer in between button is what you'll likely wanna do. — Samin
– Samin, Commented Jan 24, 2021 at 11:41

Mostafa Sultan · Accepted Answer · 2021-01-24 10:50:46Z

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 ;)

answered Jan 24, 2021 at 10:50

Mostafa Sultan

2,4362 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nicksarno · Accepted Answer · 2020-10-17 03:45:59Z

1

You can add spacing in the HStack that the buttons are in:
```
     HStack(spacing: 20) {
```

You can add padding to the buttons:

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

You can set the frame of the buttons:

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

You can add a spacer into the HStack:

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

answered Oct 17, 2020 at 3:45

nicksarno

4,2851 gold badge19 silver badges36 bronze badges

Comments

Imran0001 · Accepted Answer · 2020-10-17 03:56:15Z

1

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")
                    })
                    
                }

answered Oct 17, 2020 at 3:56

Imran0001

6385 silver badges11 bronze badges

Collectives™ on Stack Overflow

SwiftUI: Manipulate spaces between buttons in HStack

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related