CODEWITHSUNDEEP
swiftswiftuiwidget
Summer
Summer

Reputation: 95

Removing extra space between HStack and VStack?

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("BackgroundColor")
                  
                    VStack(alignment: .leading) {
                        HStack {
                            Text("Line1")
                             .foregroundColor(Color("Orange"))
                             .bold()
                                .font(.system(size: 17.5))
                                .padding(.top)
                             Spacer()
                        
                            Image("Icon")
                                .padding(.top)
                      
                        }
                        .padding()
                           
                        VStack(alignment: .leading) {
                            
                            Image("Icon2")
                      
                           Text("State")
                            .foregroundColor(Color("white"))
                            .font(.system(size: 15))
                            //.font(family == .systemLarge ? .title :
                                   // .headline)
                            .padding(.top, family == .systemLarge ? -15
                                     : 0)
                            
                            Text("Last update 4.16.2021")
                             .foregroundColor(Color("Color2"))
                             .font(.system(size: 10))
                                .opacity(0.5)
                                
                            Spacer()
                            Spacer()
                        }
                        .padding() 
                        
                    }
                    
                }

Upvotes: 2

Views: 2666

Answers (1)

jnpdx
jnpdx

Reputation: 52387

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

Upvotes: 9

Related Questions