Remove list padding in SwiftUI

In this SwiftUI tutorial, We’ll learn how can we remove the padding in a list view of SwiftUI. Actually, there are several padding in a list view that can be modified. We’ll see how we can remove each of them one by one.

Let’s get started.

Implement a simple List view.

struct ContentView:View{
    var body: some View{
        List(1..<10) { row in
            Text("Row \(row)")
        }
    }
}

So this is what a simple List View looks like initially, As we can see there is padding on the top, right, and left sides of the list view. We’ll remove each one by one.

Removing the outer side padding of List View

So for handling the outer side padding of the list view, we can use the listStyle modifier, it will take care of the padding for us.

For removing only the left and right side padding we can use the grouped list style.

struct ContentView:View{
    var body: some View{
        List(1..<10) { row in
            Text("Row \(row)")
        }
         .listStyle(.grouped)
    }
}

For removing the left, right, and top side padding we can use the plain list style.

struct ContentView:View{
    var body: some View{
        List(1..<10) { row in
            Text("Row \(row)")
        }
          .listStyle(.plain) 
    }
}

Removing the inner side padding of the List View

So now we have removed the outer left, right, and top side padding and there’s some space on the inner left side of the ListView. This inner space can also be removed. To remove the inner space we’ll use the listRowInsets modifier of the List view.

struct ContentView:View{
    var body: some View{
        List(1..<10) { row in
            Text("Row \(row)")
                .listRowInsets(EdgeInsets())
        }    
          .listStyle(.plain) 
    }
}