I am currently making a custom row template for a SwiftUI-list for a MacOS-application. Since i didn't find a way remove/adjust the blue highlight-color (I only found solutions for iOS), I made the the following template which covers the blue-part but "mimics" it within the desired area, which looks like this: Screenshot. I managed to cover most of the highlight-color by using negative paddings, etc.; however, I just can't get rid of some blue pixels on the top of the item (marked in screenshot).
My code looks like this:
Row template (simplified version)
struct EntryRow: View {
var body: some View {
// Outer frame (white space with shadow)
ZStack(alignment: .topLeading) {
// Inner frame (actual content)
ZStack(alignment: .topLeading) {
.frame(minWidth: 0, maxWidth: .infinity)
.frame(minHeight: 0, maxHeight: .infinity)
.padding(.vertical, 0)
.background(self.model.selectedEntries.firstIndex(of: entry.id) != nil ? Color.blue : Color(NSColor.controlBackgroundColor))
// 👆🏻 Changes color according to selection state of row
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(Color.black, lineWidth: 0)
)
.clipShape(RoundedRectangle(cornerRadius: 4))
}.padding(15)
.background(Color(NSColor.controlBackgroundColor))
// 👆🏻 Changes background color so that it corresponds to the list's background color (which achieves the white space between the items)
.shadow(color: Color(NSColor.tertiaryLabelColor), radius: 2)
}
}
List
The rows are loaded as follows:
List(selection: self.$model.selectedEntries) {
ForEach(self.model.entries, id: \.id) { item in
EntryRow(entry: item)
.padding(-15)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(.top, -13).padding(.horizontal, -4)
Question
Is there a way to cover the remaining highlight color, or - even better - to remove the highlight color entirely? Unfortunately, adjusting the paddings further doesn't seem to help... (but maybe I'm missing something)
Thanks a lot in advance.
Update
The selection binding looks as follows (in case that is relevant:
class UserDataViewModel: ObservableObject {
@Published var entries = [Entry]()
@Published var selectedEntries: Set<Int32> = Set<Int32>() {
didSet {
print(selectedEntries.count)
}
}
I would propose the change a direction... If you don't want default selection (the highlight you fight with) then just don't use it and make it just on tap, like in below example (due to provided snapshot is not testable)
Tested with Xcode 11.4
struct PersonList: View {
@State var selectedPerson: String?
let persons = ["Person 1", "Person 2", "Person 3"]
var body: some View {
VStack {
Text("Selected: \(selectedPerson ?? "<none>")")
List {
ForEach(persons, id: \.self) { person in
VStack {
Text(person)
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.background(Color(NSColor.controlBackgroundColor))
.onTapGesture {
self.selectedPerson = person
}
}
.listRowInsets(EdgeInsets())
}
}
}
}
Alternate: here is possible alternate based on NSTableView (which is underneath of List on macOS) notifications
List(selection: self.$model.selectedEntries) {
ForEach(self.model.entries, id: \.id) { item in
EntryRow(entry: item)
}
}
.onReceive(NotificationCenter.default.publisher(for: NSTableView.selectionIsChangingNotification)) { notification in
if let tableView = notification.object as? NSTableView {
tableView.selectionHighlightStyle = .none
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With