Question 67120 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI List seems to add padding to internal elements – Ios swift

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:

enter image description here

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:

enter image description here

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?

Tags:

3

Answers


  1. 0

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

    enter image description here

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

    Login or Signup to reply.
  2. 0

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

    List {
    TestView()
        .listRowInsets(.init()) // 👈 Here
}
    Login or Signup to reply.
  3. 0

    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)
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search