Remove extra line separators below List in SwiftUI

Question

I\'ve created a simple List as below, but there are extra separators below it.

List {
  Text(\"Item 1\")
  Text(\"Item 2\")
  Text(\"Item 3\")
         


        

Answer 1

iOS 13 builds only:

You can add this, for remove separator.

UITableView.appearance().separatorColor = .clear

Answer 2

iOS 14:

iOS 14 doesn't show extra separators below the list by default and to removing all separators, you need to use a LazyVStack inside a ScrollView instead.

---

iOS 13:

No need for Section or .grouped style!

There is a UITableView behind SwiftUI's List for iOS 13. So to remove

- Extra separators (below the list):

you need a tableFooterView and to remove. Note that iOS 14 doesn't show extra separators below the list by default.

- All separators (including the actual ones):

you need separatorStyle to be .none

init() {
    if #available(iOS 14.0, *) { 
        // iOS 14 doesn't have extra separators below the list by default.
    } else {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()
    }

    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none
}

var body: some View {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

Note that it eliminates all tables/lists's separators. So you can toggle it in a methods like onAppear() or etc. as you wish.

Answer 3

Not an ideal solution, but you can make the list style .grouped by .listStyle(.grouped) which removes any empty cells that may come below.

Answer 4

Here's one way.

List {
         Section(footer: Text(""))) {
                Text("One")
                Text("Two")
                Text("Three")
            }
     }

Instead of the Text view in the footer, you can create your own. Note -I tried EmptyView() but that doesn't actually remove the redundant separators.

Answer 5

Try this, if you want to use the section, There's still a footer visible with this:

List {
    Section(footer: Text("")) {
        Text("My text")
    }
    EmptyView()
}

I came up with a hacky way to hide footer in case you don't have any section:

List {
    Text("Item 1")
    Text("Item 2")

    // Adding empty section with footer
    Section(footer:
        Rectangle()
            .foregroundColor(.clear)
            .background(Color(.systemBackground))){EmptyView()}
            .padding(.horizontal, -15)
}

Answer 6

Adding a white rectangle as a footer and with 0 EdgeInsets worked for me:

struct Footer: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.white)
            .listRowInsets(EdgeInsets())
    }
}

struct Timeline : View {
    var body: some View {
        List {
            Section(footer: Footer()) {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
    }
}

The only problem is it also adds a Header and I'm not sure how to get rid of it.