Remove Default Padding from List in Swiftui

How to remove the left and right Padding of a List in SwiftUI?

It looks like .listRowInsets doesn't work for rows in a List that is initialised with content.

So this doesn't work:

List(items) { item in
    ItemRow(item: item)
        .listRowInsets(EdgeInsets())
}

But this does:

List {
    ForEach(items) { item in
        ItemRow(item: item)
            .listRowInsets(EdgeInsets())
    }
}

Remove top padding from `List` in SwiftUI

Firstly, I would say that GroupedListStyle is working as intended.

On iOS, the grouped list style displays a larger header and footer
than the plain style, which visually distances the members of
different sections.

You say you have tried this, but it does work for me (Xcode 12.5.1):

    List { ... }    
    .onAppear(perform: {
        UITableView.appearance().contentInset.top = -35
    })

You could also hide the list header, by using a ZStack with the List at the bottom of the stack and the Picker over the top. The Picker does have transparency, so you would also have to add an opaque view to act as background for the Picker.

var body: some View {
    NavigationView {
        ZStack(alignment: .top) {
            List { ... }
            .listStyle(.grouped)
            .padding(.top, 30)
            
            Color.white
                .frame(height: 65)
            
            Picker { ... }
            .pickerStyle(.segmented)
            .padding()
        }
        .navigationBarTitle("Add Task", displayMode: .inline)
    }
}

As far as I can see this just appears the same as PlainListStyle would do, but I assume you have a particular reason for wanting to use GroupedListStyle.

Remove default padding from List in SwiftUI

To achieve this you need to use ForEach inside List combined with .listRowInsets as in example below

struct Demo: View {
    var colors: [Color] = [.red, .blue, .yellow]
    var body: some View {
        List {
            ForEach(colors, id: \.self) { color in
                color
            }.listRowInsets(EdgeInsets())
        }
        // Update: Different iOS versions have different 
        // default List styles, so set explicit one if needed
        .listStyle(PlainListStyle())
    }
}

How to remove bottom/top item padding from SwiftUI List in Mac OS

Here is a demo of possible solution (tested with Xcode 11.4 / macOS 10.15.6).

Note: if it will be needed to have several active Lists (ie. NSTableView) and some of them should have intercell spacing (aka separators) then they should be done by SwiftUI instruments, because this approach disables intercell spacing for all visible Lists

var body: some View {
    VStack {
        Text("Selected: \(selectedPerson ?? "<none>")")
        List(selection: $selectedPerson) {
             ForEach(persons, id: \.self) { person in
                Text(person)
             }
             .listRowBackground(Color.red)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        }.border(Color.green)
        .onReceive(NotificationCenter.default.publisher(for: NSView.frameDidChangeNotification)) {
            guard let tableView = $0.object as? NSTableView else { return }
            tableView.intercellSpacing = .zero
        }
    }
}

Remove extra padding above section header?

Use sectionHeaderTopPadding. It targets this specific spacing.

The API is only available from iOS 15, but the extra spacing itself is present in iOS 15 runtimes only.

struct ContentView: View {
        
    init() {
        if #available(iOS 15.0, *) {
            UITableView.appearance().sectionHeaderTopPadding = 0
        }
    }

    ...
}

---

Related Topics