Removing extra space between HStack and VStack?

Question

My text "Line1" has too much space below it. I would like to move the image up more but not sure how to get rid of all that space? This is for a small widget so would love to hear any advice on how to get it to resize properly for all devices!

var body: some View {
        ZStack {
                    Color("GoodBackground")
                  
                    VStack(alignment: .leading) {
                        HStack {
                            Text("Line1")
                             .foregroundColor(Color("Orange"))
                             .bold()
                                .font(.system(size: 17.5))
                                .padding(.top)
                             Spacer()
                        
                            Image("CheckmarkWhiteCircle25x25")
                                .padding(.top)
                      
                        }
                        .padding()
                           
                        VStack(alignment: .leading) {
                            
                            Image("WidgetMachine67x30")
                      
                           Text("State")
                            .foregroundColor(Color("Toolstext"))
                            .font(.system(size: 15))
                            //.font(family == .systemLarge ? .title :
                                   // .headline)
                            .padding(.top, family == .systemLarge ? -15
                                     : 0)
                            
                            Text("Last update 4.16.2021")
                             .foregroundColor(Color("Toolstext"))
                             .font(.system(size: 10))
                                .opacity(0.5)
                                
                            Spacer()
                            Spacer()
                        }
                        .padding() 
                        
                    }
                    
                }

have you tried removing the spacer just above your checkmark image? — rlong405

jnpdx jnpdx · Accepted Answer · 2021-05-07T18:47:15

On your first VStack, you can add a spacing of 0:

VStack(alignment: .leading, spacing: 0) {

You also have a couple of padding() modifiers, that also increase spacing. You could change them to .padding(.horizontal), which would remove that extra padding.

Sometimes, it's useful for debugging to put .borders around the different elements to see what's really taking up space. For example, here's what my debugging version looks like (note I had to change the image and color names and provide default sizes size I didn't have your images or colors):

var body: some View {
    ZStack {
        Color.red
        
        VStack(alignment: .leading, spacing: 0) {
            HStack {
                Text("Line1")
                    .foregroundColor(.orange)
                    .bold()
                    .font(.system(size: 17.5))
                    .padding(.top)
                Spacer()
                
                Image("2")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .padding(.top)
                
            }
            .padding(.horizontal)
            .border(Color.green)
            
            VStack(alignment: .leading) {
                Image("2")
                    .resizable()
                    .frame(width: 67, height: 30)
                
                Text("State")
                    .foregroundColor(Color.green)
                    .font(.system(size: 15))
                
                Text("1")
                    .foregroundColor(Color.blue)
                    .font(.system(size: 10))
                    .opacity(0.5)
                
                Spacer()
                Spacer()
            }
            .padding(.horizontal)
            .border(Color.blue)
        }
    }
}

Removing extra space between HStack and VStack?

1 Answers