CODEWITHSUNDEEP
xcodeswiftui
Kenny
Kenny

Reputation: 1121

Remove padding bewteen items in HStack

I'm trying to define a sub-view which is three buttons, each inside a rounded rectangle. The first button is a fixed width, the other two buttons should share the remaining width. This is what I'm getting: enter image description here

You can see that there is some padding between the buttons, and although the two larger buttons are the correct size, the padding makes the whole thing too wide.

Here is my SwiftUI code:

struct TopBarView: View {
var body: some View {
    GeometryReader { geometry in
        HStack {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous )
                    .stroke()
                    
                Button(action: sideMenu) {
                    Image(systemName: "line.horizontal.3")
                }
            }.frame(width: 48, height: 48, alignment: .center)
            
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .stroke()
                
                Button(action: sideMenu) {
                    Text( "First")
                }
            }.frame(width: (geometry.size.width - 48)/2, height: 48)
            
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .stroke()
    
                Button(action: sideMenu) {
                    Text( "Second")
                }
            }.frame(width: (geometry.size.width - 48)/2, height: 48)
        }
    }
}

func sideMenu() -> Void {
    
}

}

So my question is - whats the correct way to remove the gap beween the buttons so that everything fits?

Upvotes: 2

Views: 1311

Answers (1)

the.blaggy
the.blaggy

Reputation: 885

You can pass the spacing parameter to HStack to remove the spacing like this:

HStack(spacing: 0) { 
    //some content
}

Upvotes: 5

Related Questions