SwiftUI: how to get rid of top and bottom separators on lists

Question

I'm working with Lists in SwiftUI, and noticed that when I have only one row, the separators still appear on the top and bottom:

Similarly, for Lists with multiple rows, these separators still appear on the top and bottom. How can I remove the separator at the very top and very bottom of a List, while keeping separators between middle rows?

Answer 1

You can just hide separators using modifier (iOS 15+)

List {
    ForEach(garage.cars) { car in
        Text(car.model)
            .listRowSeparator(.hidden)    // << this !!
    }
}

Answer 2

if you've come this far and you're wondering how I can keep the line, but in such a way that it's visible in full and not just in half of the cell, I created this modifier that can be used to complete the line below each cell.

struct ListSeparatorModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .alignmentGuide(.listRowSeparatorTrailing) { dimension in
                dimension[.trailing]
            }
            .alignmentGuide(.listRowSeparatorLeading) { dimension in
                dimension[.leading]
            }
    }
}

extension View {
    func listRowSeparator() -> some View {
        self.modifier(ListSeparatorModifier())
    }
}