SOLVED: List with VStack indents first line when multiple text fields present

@Ampsonic

Dec '22

I am attempting to create a list, using a ForEach. Inside the ForEach, I have a VStack with two Text fields. When I only have a single text field, the view looks normal, but when I have two Text fields, the first field gets indented. Does anyone know why or how I can avoid this indentation?

Single Text Field:

Screen Shot

struct ContentView: View {

    @StateObject var contacts = Contacts()

    var body: some View {
        NavigationView {
            List {
                ForEach(contacts.items, id: \.name) { item in
                    VStack{
                        Text(item.name)
                        //Text(item.company)
                    }
                }
            }
            .navigationTitle("TouchBase")
            .toolbar {
                Button {
                    let contact = SingleContact(name: "Test", company: "Test Company")
                    contacts.items.append(contact)
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
    }
}

Two Text Fields

Screen Shot

struct ContentView: View {

    @StateObject var contacts = Contacts()

    var body: some View {
        NavigationView {
            List {
                ForEach(contacts.items, id: \.name) { item in
                    VStack{
                        Text(item.name)
                        Text(item.company)
                    }
                }
            }
            .navigationTitle("TouchBase")
            .toolbar {
                Button {
                    let contact = SingleContact(name: "Test", company: "Test Company")
                    contacts.items.append(contact)
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
    }
}

@roosterboy HWS+

Dec '22

It's because Text and VStack elements by default only take up as much space as they need and don't extend the full width. Also, the default horizontal alignment within a VStack is centered. So your VStack is only wide enough for the longest Text and the two Text elements get centered within. (You'll note the the first Text isn't actually indented, it's centered over the second Text.)

You can use VStack(alignment: .leading) to make the two Text items line up on the left side.

@Ampsonic

Dec '22

Thank you! I feel dumb, as I am going through the 100 days of SwiftUI right now, and I've added .leading a million times, but obviously didn't realize why.

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.