【问题标题】:Remove/Change list highlight-color (or adjust space between items)删除/更改列表突出显示颜色(或调整项目之间的空间)
【发布时间】:2020-06-28 22:59:58
【问题描述】:

我目前正在为 MacOS 应用程序的 SwiftUI 列表制作自定义行模板。由于我没有找到删除/调整蓝色突出显示颜色的方法(我只找到了适用于 iOS 的解决方案),我制作了以下模板,该模板涵盖了蓝色部分,但在所需区域内“模仿”了它,看起来像这个:Screenshot。我设法通过使用负填充等来覆盖大部分高光颜色;但是,我就是无法摆脱项目顶部的一些蓝色像素(在屏幕截图中标记)。

我的代码如下所示:

行模板(简化版)

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(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)

问题

有没有办法覆盖剩余的高亮颜色,或者 - 甚至更好 - 完全移除高亮颜色?不幸的是,进一步调整填充似乎没有帮助......(但是也许我错过了什么)

非常感谢。

更新

选择绑定如下所示(如果相关:

    class UserDataViewModel: ObservableObject {

    @Published var entries = [Entry]()
    
    @Published var selectedEntries: Set<Int32> = Set<Int32>() {
        didSet {
            print(selectedEntries.count)
        }
    }

【问题讨论】:

    标签: macos swiftui


    【解决方案1】:

    我建议改变一个方向...如果您不想要默认选择(您与之战斗的突出显示),那么就不要使用它并使其只是点击,如下例所示(由于提供快照不可测试)

    使用 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())
                }
            }
        }
    }
    

    备用:这里可能基于NSTableView(在macOS 上位于List 下方)通知的备用

    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
        }
    }
    

    【讨论】:

    • 非常感谢您的快速回复!我已经尝试实现您的代码,但没有设法让多选工作(我已经添加了刚刚添加到选择绑定的代码 - 如果我应该添加更多代码,请告诉我)。我怎么能实现这个?顺便说一句,在实现点击手势时,选择是否会像往常一样工作(使用键盘等)?谢谢!
    • 非常感谢!!我一直在寻找这个字面上好几天!此外,您在这里提供的有用建议简直是史诗般的。现在看起来像这样:ibb.co/v4kLzBK :)
    • @Asperi,可以很好地处理一个奇怪的错误,我将尝试对其进行排序。在三窗格视图中,第一次单击以选择中间窗格项目会清除(即变为空白)中间/右侧窗格,即使仍然选择了最左侧窗格的项目。任何后续点击都将毫无问题地执行。关于解决此问题时我应该注意什么的任何提示?
    猜你喜欢
    • 2014-11-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-13
    • 2013-02-18
    • 1970-01-01
    • 1970-01-01
    • 2010-12-12
    相关资源
    最近更新 更多