How to implement separator in List by SwiftUI on macOS properly

user_1065373 0
Viewed 928

It seems there is no default separator in List by using SwiftUI on macOS. So I am using Divider to add by manual. But when I enable multiple line selection, the app will render a white line automatically. And it seems strange that both divider line and white line exist.

Is there a best practice way to implement row separator on macOS by using SwiftUI ? Or can I remove the default white line rendering by selection?

  1. add divider enter image description here

  2. multi selections with divider enter image description here

  3. multi selections without divider enter image description here

struct WelcomeView: View {
    let contents = ["aaa", "bbb", "ccc"]
    @State var selection = Set<String>()

    var body: some View {
        List(selection: $selection) {
            Section(header: Text("header")) {
                ForEach(contents, id: \.self) { row in
                    VStack {
                        Text(row)

//                        Divider()
                    }
                }
            }
        }
    }
}
swiftui-list swiftui swift xcode macos
1 Answers

In macOS 13 or newer you can now use the listRowSeparator modifier like this:

List {
    ForEach(garage.cars) { car in
        Text(car.model)
            .listRowSeparator(.visible)
    }
}
user_3452580
Related