How to remove bottom/top item padding from SwiftUI List in Mac OS

user_737457 0
Viewed 2985

I am having a hard time removing all padding from my cells in MacOS using SwiftUI. I can't seem to be able to do it even in Apple's Code!

https://developer.apple.com/tutorials/swiftui/creating-a-macos-app

For example, inside the LandMarkList of the MacLandmarks folder in Xcode, I have put a .listRowInsets(EdgeInsets()) at the end of the forEach so that the code looks like this:

struct LandmarkList: View {
    @EnvironmentObject private var userData: UserData
    @Binding var selectedLandmark: Landmark?
    @Binding var filter: FilterType

    var body: some View {
        List(selection: $selectedLandmark) {
            ForEach(userData.landmarks) { landmark in
                if (!self.userData.showFavoritesOnly || landmark.isFavorite)
                    && (self.filter == .all
                        || self.filter.category == landmark.category
                        || (self.filter.category == .featured && landmark.isFeatured)) {
                    LandmarkRow(landmark: landmark).tag(landmark)
                        .background(Color.red)
                }
            }
            .listRowInsets(EdgeInsets())
        }
    }
}

I have also put a red background color in each cell. This is the result I am getting:

Spaces top and bottom

The point is that I just can't seem to get rid of the vertical space between the cells of this list. All solutions I have seen seem to mention iOS for this, but I want to do this in Mac OS (which should have the same behavior, but it doesn't).

swiftui-list swiftui macos ios
1 Answers

Here is a demo of possible solution (tested with Xcode 11.4 / macOS 10.15.6).

Note: if it will be needed to have several active Lists (ie. NSTableView) and some of them should have intercell spacing (aka separators) then they should be done by SwiftUI instruments, because this approach disables intercell spacing for all visible Lists

demo

var body: some View {
    VStack {
        Text("Selected: \(selectedPerson ?? "<none>")")
        List(selection: $selectedPerson) {
             ForEach(persons, id: \.self) { person in
                Text(person)
             }
             .listRowBackground(Color.red)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        }.border(Color.green)
        .onReceive(NotificationCenter.default.publisher(for: NSView.frameDidChangeNotification)) {
            guard let tableView = $0.object as? NSTableView else { return }
            tableView.intercellSpacing = .zero
        }
    }
}
user_122990300
Related