Remove padding bewteen items in HStack

Question

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:

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?

Answer 1

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

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