工作表中带有NSPredicateEditor的macOS暗模式UI错误

问题描述

在Mac应用程序中，我呈现了一个包含NSPredicateEditor的工作表:

  parentViewController.presentAsSheet(predicateEditor) 

我为此在此处创建了一个示例项目:

1. 灯光模式:

如何解决这些以表格形式显示的NSPredicateEditor UI错误?

错误报告:

• rdar://42789149-NSPredicateEditor在工作表中的黑暗模式下表现不佳
• rdar://46142171-表格提供的NSPredicateEditor在黑暗模式下完全损坏

解决方案

这个答案修复了 NSPredicate 编辑器控件的微妙错误的背景颜色，如下所示:

• 灯光模式: https://i.stack.imgur.com/3E4L4.png
• 黑暗模式: https://i.stack.imgur.com/AqbQ5.png

将视觉效果视图使用翻转坐标系插入谓词编辑器视图层次结构.翻转的VEV应该存在于NSClipView和NSPredicateEditor之间.

然后添加自动布局约束，如下所示.不要约束 VEV 的底部或高度锚点.

---

注意:

• 设置 scrollView.documentView = flippedVEV 可修复滚动.

• 如果您不使用 isFlipped VEV，则谓词编辑器行将堆叠在底部而不是顶部.

---

  class FlippedVEV:NSVisualEffectView {覆盖var isFlipped:布尔{返回true}}类PredicateEditorViewController:NSViewController {@IBOutlet弱var predicateEditor:NSPredicateEditor！覆盖func viewDidLoad(){super.viewDidLoad()如果让clipView = predicateEditor.superview为?NSClipView，让scrollView = clipView.superview 为?NSScrollView {让flippedVEV = FlippedVEV(frame:predicateEditor.frame)flippedVEV.material = .sheetpredicateEditor.removeFromSuperview()flippedVEV.addSubview(predicateEditor)clipView.addSubview(flippedVEV)scrollView.documentView = flippedVEVflippedVEV.translatesAutoresizingMaskIntoConstraints = falseNSLayoutConstraint.activate([flippedVEV.leadingAnchor .constraint(equalTo:predicateEditor.leadingAnchor)，flippedVEV.trailingAnchor.constraint(equalTo:predicateEditor.trailingAnchor)，flippedVEV.topAnchor .constraint(equalTo:predicateEditor.topAnchor)，flippedVEV.bottomAnchor .constraint(equalTo:predicateEditor.bottomAnchor)，clipView.leadingAnchor .constraint(equalTo:flippedVEV .leadingAnchor)，clipView.trailingAnchor .constraint(equalTo:flippedVEV .trailingAnchor)，clipView.topAnchor .constraint(equalTo:flippedVEV .topAnchor)，])}}} 

In a Mac app, I am presenting a sheet containing an NSPredicateEditor:

parentViewController.presentAsSheet(predicateEditor)

I created a sample project for this behavior here:
https://github.com/pkamb/Feedback_NSPredicateEditor

In macOS 10.14 Mojave and 10.15 Catalina, after the introduction of Dark Mode, this results in a number of UI bugs.

The background of the NSPredicateEditor controls does not match the background of the row / superview's background. Note the is background and the background of the text fields.

1. Dark Mode:

1. Light Mode:

How can these sheet-presented NSPredicateEditor UI bugs be fixed?

Bug Reports:

• rdar://42789149 - NSPredicateEditor does not behave well in dark mode in a sheet
• rdar://46142171 - NSPredicateEditor presented by a Sheet is completely broken in Dark Mode

解决方案

This answer fixes the subtly wrong background colors of NSPredicate editor controls as shown here:

• Light Mode: https://i.stack.imgur.com/3E4L4.png
• Dark Mode: https://i.stack.imgur.com/AqbQ5.png

Insert a Visual Effects View using a flipped coordinate system into the Predicate Editor view hierarchy. The flipped VEV should exist between the NSClipView and the NSPredicateEditor.

Then add autolayout constraints as shown below. Do not constrain the bottom or height anchors of the VEV.

---

Note:

• Setting the scrollView.documentView = flippedVEV fixes scrolling.

• If you do not use an isFlipped VEV, the Predicate Editor rows stack at the bottom rather than the top.

---

class FlippedVEV: NSVisualEffectView {
    override var isFlipped: Bool { return true }
}

class PredicateEditorViewController: NSViewController {

    @IBOutlet weak var predicateEditor: NSPredicateEditor!

    override func viewDidLoad() {
        super.viewDidLoad()

        if let clipView = predicateEditor.superview as? NSClipView, let scrollView = clipView.superview as? NSScrollView {
            let flippedVEV = FlippedVEV(frame: predicateEditor.frame)
            flippedVEV.material = .sheet

            predicateEditor.removeFromSuperview()
            flippedVEV.addSubview(predicateEditor)
            clipView.addSubview(flippedVEV)
            scrollView.documentView = flippedVEV

            flippedVEV.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                flippedVEV.leadingAnchor .constraint(equalTo:predicateEditor.leadingAnchor ),
                flippedVEV.trailingAnchor.constraint(equalTo:predicateEditor.trailingAnchor),
                flippedVEV.topAnchor     .constraint(equalTo:predicateEditor.topAnchor     ),
                flippedVEV.bottomAnchor  .constraint(equalTo:predicateEditor.bottomAnchor  ),
                clipView.leadingAnchor   .constraint(equalTo:flippedVEV     .leadingAnchor ),
                clipView.trailingAnchor  .constraint(equalTo:flippedVEV     .trailingAnchor),
                clipView.topAnchor       .constraint(equalTo:flippedVEV     .topAnchor     ),
            ])
        }
    }

}

这篇关于工作表中带有NSPredicateEditor的macOS暗模式UI错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！