Swift How to Make List Start at The Top with No Padding

swift how can I make list start at the top with no padding

That padding is a List's grouped style, if you want to remove it then use PlainListStyle

    List {
        ForEach(model) { value in
            
            // Simple elements populated
        }
    }.listStyle(PlainListStyle())     // << here !!

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.

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

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

    ...
}

SwiftUI Remove Spacing from Top Of List in NavigationView

The cobination of .environment(\.defaultMinListHeaderHeight, 1) and .listRowInsets worked for me:

var body: some View {
    NavigationView {
        List {
            Section("Title") {
                ForEach((1...10), id: \.self) {
                    Text("\($0)")
                }
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
        }
        .navigationTitle("Title")
        .environment(\.defaultMinListHeaderHeight, 1)
    }
}

---

Related Topics