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

Two ways of doing that

========================================================

struct ContentView: View {

    var body: some View {

        List {
                Text("One")
                Text("Two")
                Text("Three")
        }.listStyle(.grouped)
    }
}

========================================================

struct ContentView: View {

    var body: some View {

        List {
            Section(header: Text("Header"), footer: Text("Footer")) {
                Text("One")
                Text("Two")
                Text("Three")
            }
        }
    }
}

I recommend grouped list style

Answer 2

For unknown reason, I had this problem in tableView even after iOS14, even though the answer above that there will be no longer extra separator lines in default.

The method I use to solve it is to set footerView to vacant UIView, as in that same answer.

your_tableView.tableFooterView = UIView()

Answer 3

It's not a perfect solution, but you could use a ScrollView, where each cell is created using a ForEach call, and the dividers are created using Divider().

Edit: I spoke with Apple engineers at WWDC about this. They have heard lots of feedback regarding removing/changing dividers. However, for now my above answer is their recommendation.

Answer 4

This is for iOS 13 builds only.

Use onAppear modify a separator style through UITableView and restore to the initial state with onDisappear

List {}
.onAppear { UITableView.appearance().separatorStyle = .none }
.onDisappear { UITableView.appearance().separatorStyle = .singleLine }