SwiftUI List seems to add padding to internal elements

Question

I'm trying to make a simple to-do list app and seem to be running up against some List View idiosyncracies. I have a View that produces this:

struct TestView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Wash the laundry")
                .font(.headline)
            Spacer()
            HStack {
                Label("9 days ago", systemImage: "calendar")
                Spacer()
                Label("No assignee", systemImage: "person.fill")
                    .labelStyle(.trailingIcon)
                    .foregroundColor(.gray)
            }
            .font(.caption)
        }
        .padding()
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
            .previewLayout(.fixed(width: 400, height: 60))
    }
}

And yet when I put it into a list, it comes out like:

struct TestListView: View {
    var body: some View {
        NavigationView {
            List {
                TestView()
            }
            .navigationTitle("All Tasks")
            .listStyle(.grouped)
        }
    }
}

Note the extra padding around the calendar icon (and seemingly the entire bottom row) that it added. How do I remove this?

Mojtaba Hosseini · Accepted Answer · 2025-01-28 16:38:26Z

5

List rows have default inset. You can get rid of it by setting an empty inset on rows:

List {
    TestView()
        .listRowInsets(.init()) // 👈 Here
}

🎁 Other Padding / Margin / Spacings of Lists

There are several spacings that you can change in a list on all iOS versions.

You can change any of them using 👉 this answer here 👈

Demo

edited Jan 28 at 16:38

answered Nov 9, 2022 at 8:03

Mojtaba Hosseini

124k45 gold badges342 silver badges328 bronze badges

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

4 Comments

Steven Stefanik Over a year ago

Do you know how to get the default inset value? I want to change the top and bottom insets on the row, but keep the leading/trailing defaults. The default is different depending on device size, so can't hardcode it.

Mojtaba Hosseini Over a year ago

Maybe adding a .padding(.vertical) is the closest similar look

John Cashew Over a year ago

@StevenStefanik were you able to figure out how to get the default insets? Thank you

Steven Stefanik Over a year ago

@JohnCashew did not

Trupesh Vaghasiya · Accepted Answer · 2022-11-09 08:43:17Z

2

9 Days ago label to add .labelStyle(.titleAndIcon)

Please try with below code and let me know it works for you

struct ContentView: View {
    var body: some View {
        List {
            VStack(alignment: .leading) {
                Text("Wash the laundry")
                    .font(.headline)
                    .padding(.bottom, 10)
                HStack {
                    Label("9 days ago", systemImage: "calendar")
                        .labelStyle(.titleAndIcon)
                    Spacer()
                    Label("No assignee", systemImage: "person.fill")
                        .labelStyle(.titleAndIcon)
                        .foregroundColor(.gray)
                }
                .font(.caption)
            }
        }.listRowInsets(.init())
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Let me know if it's working for you or not.

edited Nov 9, 2022 at 8:43

answered Nov 9, 2022 at 7:04

Trupesh Vaghasiya

5255 silver badges17 bronze badges

2 Comments

jayjyli Over a year ago

Thanks! This worked. Additionally, I also found out that you can accomplish the same thing using a simple HStack in a custom label style. This way, you can even preserve the colouring of the elements if you wish.

Trupesh Vaghasiya Over a year ago

Okay, I will try

davidtamas · Accepted Answer · 2022-11-09 08:13:11Z

1

While you received an answer for the padding around the calendar icon, SwiftUI still insets your list rows' content by default.

To remove these insets, you can use listRowInsets(_:) view modifier on the contents of your rows like this:

struct TestListView: View {
    var body: some View {
        NavigationView {
            List {
                TestView()
                    .listRowInsets(EdgeInsets())
            }
            .navigationTitle("All Tasks")
            .listStyle(.grouped)
        }
    }
}

answered Nov 9, 2022 at 8:13

davidtamas

513 bronze badges

Collectives™ on Stack Overflow

SwiftUI List seems to add padding to internal elements

3 Answers 3

🎁 Other Padding / Margin / Spacings of Lists

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

🎁 Other Padding / Margin / Spacings of Lists

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related