How to remove List Section separators in SwiftUI

There might be a time when you want to remove just the first and the last row separator in SwiftUI List.

In iOS 15, you can easily do that with listSectionSeparator(_:edges:) modifier.

How to remove the section separators in SwiftUI List

To be able to remove the first and the last row separators, you need to understand one thing. That is those separators are actually a part of the section separator.

So, you can easily remove the first and the last row separators by using the listSectionSeparator(_:edges:) modifier.

listSectionSeparator(_:edges:) control the visibility of section seprators.

To hide section separator, we apply .listSectionSeparator(.hidden) to a Section view.

NavigationView {
    List {
        Section {
            ForEach(0..<7) { i in
                Text("Row \(i.description)")
            }
        }
        .listSectionSeparator(.hidden)
    }
    .listStyle(.plain)
    .navigationTitle("List")
}

By apply .listSectionSeparator(.hidden) to a Section, you remove the first and the last separator for that particular section.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to remove the First separator in SwiftUI List

The .listSectionSeparator(.hidden) has an optional second argument that you can specify which edges you want to hide the separator. By default, it's applied to all edges (both top and bottom).

To remove the first separator, we use .listSectionSeparator(.hidden, edges: .top).

NavigationView {
    List {
        Section {
            ForEach(0..<7) { i in
                Text("Row \(i.description)")
            }
        }
        .listSectionSeparator(.hidden, edges: .top)
    }
    .listStyle(.plain)
    .navigationTitle("List")
}

Hide the top separator using .listSectionSeparator(.hidden, edges: .top).

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to remove the Last separator in SwiftUI List

To remove the last separator, we use .listSectionSeparator(.hidden, edges: .bottom).

NavigationView {
    List {
        Section {
            ForEach(0..<7) { i in
                Text("Row \(i.description)")
            }
        }
        .listSectionSeparator(.hidden, edges: .bottom)
    }
    .listStyle(.plain)
    .navigationTitle("List")
}

Hide the top separator using .listSectionSeparator(.hidden, edges: .bottom).