Why is my SwiftUI VStack not aligning properly?

Question

I'm trying to make my VStack padding consistent regardless of the content, and it doesn't seem to be working in certain instances (as if the Scrollview aligned with the center instead).

Ideally, I would like the padding to be consistent regardless of the content on the screen.

Such as this (when padding isn't consistent):

Here is the code used:

var body: some View {
        
        VStack {
            
            HStack{
                
                Button(action: {}) {
                    
                    Image(systemName: "arrow.backward")
                 
                }
                
                Spacer(minLength: 0)
                
                Button(action: {}) {
                    
                    Image(systemName: "bookmark")
                      
                }
            }
            .padding(.vertical, 10)
            
            ScrollView {
                
                VStack{
                    
                    HStack{
                        
                        VStack (alignment: .leading, spacing: 5) {
                            
                            Text("Today's Poem, \(currentDate)")
                               
                            
                            if let poem = fetch.poems.first {
                                
                                Text("\(poem.title)")
                                   
                                
                                Text("BY "+poem.author.uppercased())
                                   
                                
                                VStack (alignment: .leading) {
                                    
                                    ForEach(poem.lines, id: \.self) {
                                        Text($0)
                                            .multilineTextAlignment(.leading)
                                         
                                    }
                                    
                                }
                            
                                                        
                            } else {
                                Spacer()
                            }
                        }
                        
                    }
                    
                }
            }
            
            Button("Get Next Poem") { fetch.getPoem() }
            
        }
        .background(Color.white.ignoresSafeArea())
        .padding(.horizontal)
    }
}

Any ideas? Thanks in advance.

pawello2222 · Accepted Answer · 2020-12-23 17:50:55Z

1

Change the innermost

VStack {

to

VStack(alignment: .leading) {

edited Dec 23, 2020 at 17:50

pawello2222

55.5k23 gold badges183 silver badges240 bronze badges

answered Dec 23, 2020 at 5:13

Disco

3633 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Simbeul Over a year ago

Thanks for the help. It's better, (as in more consistent) but still seems to be thrown off in certain instances. Most of the time when the Title is 2 lines or more. Any ideas why?

Simbeul Over a year ago

** Edit, the alignment now works but the padding is what is still inconsistent.

Disco Over a year ago

I would add .lineSpacing(0) to your title, and I assume you want a spacing of 5 for the actual poem text, in which case you should also add that to the innermost VStack. Good luck with your project!

nicksarno Over a year ago

(1) You shouldn't accept an answer if it didn't fully answer your question, (2) when facing problems like this, the easiest way to debug is to add .background(Color.__) to all of your Stacks and you will see where the edges of the frames do not line up. (3) In your code, you haven't set the alignment for nearly any of the Stacks or the frames. I would guess adding .frame(maxWidth: .infinity, alignment: .leading) to your VStack will solve many of your problems.

Collectives™ on Stack Overflow

Why is my SwiftUI VStack not aligning properly?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related