Remove empty rows in List Swift UI Xcode 11

Question

How to remove empty rows in List by using Swift UI Here is my code.

struct LandMarkList: View {
    var body: some View {
        NavigationView {
            List(LandMarkListData) { landmark in
                LandMarkRow(landmark: landmark)
            }

        .navigationBarTitle("List")
        }
    }
}

Answer 1

struct LandMarkList: View {
    var body: some View {
        NavigationView {
            List(LandMarkListData) { landmark in
                LandMarkRow(landmark: landmark)
            }

            .navigationBarTitle("List")
            .listStyle(GroupedListStyle())
        }
    }
}

Finally i have found the solution by adding the listStyle .

Answer 2

NavigationView {
   ...
   .listStyle(.grouped)
}

In your case:

struct LandMarkList: View {
    var body: some View {
        NavigationView {
            List(LandMarkListData) { landmark in
                LandMarkRow(landmark: landmark)
            }

        .navigationBarTitle("List")
        .listStyle(.grouped)
        }
    }
}

Answer 3

There's currently no way to remove empty cells from a List in SwiftUI as far as I know. You can however still get rid off the empty cells (specifically all of those unsightly dividers) by not using a List at all and creating the Divider s manually. Try something like the following:

ScrollView() {
    ForEach(elements) { element in
        CellView(element: element)
        Divider()
    }
}

Answer 4

This helped me to get rid of the empty rows in List using Xcode 11.4 under MacOS Catalina 10.15.5 Beta:

List(flights) { flight in
  FlightInfoRow(flightInfo: flight)
}.onAppear{UITableView.appearance().separatorColor = .clear}

If you want to show the Separator lines for existing rows anyway you can do this in your custom List row View.

1. Use the information of the cells Width and height with GeometryReader inside your View.

VStack { 
  GeometryReader { geometry in
    HStack { Text("\(flight.airline)") }
  }
}

2. Use a Path{ path in} to draw a horizontal line beneath your content information as shown here:

Path{ path in
  path.move(to: CGPoint(x: 0, y: geometry.size.height))
  path.addLine(to: CGPoint(x: geometry.size.width, y: geometry.size.height))
}.stroke(Color(.lightGray), lineWidth: 0.5)

This will create something like this (list without empty rows & separator lines):

Answer 5

It is possible thanks to Introspect

My code

List() {
  ...
}
.introspectTableView { tableView in
     tableView.separatorColor = UIColor.lightGray.withAlphaComponent(0.4)
     tableView.tableFooterView = UIView()   
}

Answer 6

Try something like this:

let nonEmptyLandmarks = LandMarkListData.filter { !$0.isEmpty }
List(nonEmptyLandmarks) { landmark in
     LandMarkRow(landmark: landmark)
}