CODEWITHSUNDEEP
swiftuivstackswiftui-button
user2924482
user2924482

Reputation: 9140

SwiftUI: Manipulate spaces between buttons in HStack

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

enter image description here

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?

Upvotes: 1

Views: 6597

Answers (3)

Mostafa Sultan
Mostafa Sultan

Reputation: 2436

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

Upvotes: 3

Imran0001
Imran0001

Reputation: 628

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

Upvotes: 1

nicksarno
nicksarno

Reputation: 4245

  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)

  1. You can set the frame of the buttons:

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

  2. You can add a spacer into the HStack:

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

Upvotes: 1

Related Questions