macOS暗模式UI缺陷与NSPredicateEditor在工作表中

Question

在Mac应用程序中，我展示了一个包含NSPredicateEditor的工作表：

parentViewController.presentAsSheet(predicateEditor)

我在这里为这个行为创建了一个示例项目：

NSPredicateEditor

在macOS 10.14 Mojave和10.15 Catalina中，在引入黑暗模式后，会产生许多UI错误。

NSPredicateEditor控件的背景与行/superview的背景不匹配。注意is背景和文本字段的背景。

1. 暗模式：

​

​

1. 光模式：

​

​

如何修复这些表单显示的NSPredicateEditor UI错误？

Bug报告：

• rdar://42789149 - NSPredicateEditor在暗模式下表现不佳
• rdar://46142171 - NSPredicateEditor在黑暗模式下被完全破坏

Answer 1

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

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

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

然后添加autolayout约束，如下所示。不要限制VEV的底部或高度锚。

注意：

• 设置scrollView.documentView = flippedVEV修复滚动。
• 如果不使用isFlipped VEV，则谓词编辑器将在底部而不是顶部列出堆栈。

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     ),
            ])
        }
    }

}

Answer 2

编辑：

在Xcode更新中引入了同样的更改，现在不再需要了。见这里的答案：https://stackoverflow.com/a/54189665/1265393

默认情况下，NSPredicateEditor的祖父母视图应该是一个NSScrollView：

​

​

如果您给这个滚动视图一个clearColor透明的背景，重大黑暗模式问题将大部分是固定的。如果您在光照模式下保持此alpha更改处于活动状态，则谓词编辑器将假定为白色背景，而不是默认的灰色视图背景。

正如苹果说的，在layout()或其他使您的视图有机会在系统外观更改时更新自身的方法中进行此更改。

class NSPredicateEditorDarkModeFix: NSPredicateEditor {

    override func layout() {
        defer { super.layout() }

        guard let clipView = self.superview as? NSClipView, let scrollView = clipView.superview as? NSScrollView else {
            return
        }

        let alpha: CGFloat = NSAppearance.current.name == .darkAqua ? 0.0 : 1.0
        scrollView.backgroundColor = scrollView.backgroundColor.withAlphaComponent(alpha)
    }

}

黑暗模式NSPredicateEditor仍然存在一些UI问题，即每个控件的灰色背景帧。

​

​

在Omni Show播客中讨论了这个修复：

https://theomnishow.omnigroup.com/episode/rey-worthington-omnigraffle-engineer https://twitter.com/theomnishow/status/1052630270719868928

Answer 3

苹果公司对我的错误报告做出了回应，并说下面这种非常糟糕的黑模式行为是通过最近对Xcode的更新来修正的。

您可能仍然需要手动修复这里的答案：https://stackoverflow.com/a/60842764/1265393中更微妙的bug。

苹果公司给出的这个答案仅仅是对这里看到的极坏的黑暗模式错误的修正：

​

​

由一张纸呈现的NSPredicateEditor在黑暗模式下完全崩溃 rdar://46142171 苹果开发者关系： 若要修复暗模式外观，应将scollview背景色重置为默认的Me:。 你是说在Mojave的更新中已经修复了？ 为了使NSPredicateEditor在黑暗模式下完全可行，需要使用滚动视图透明背景。苹果开发者关系： 不，在Xcode中，您需要将scollview背景色更改为默认(controlBackgroundColor) Me: 好的，在切换(返回)到controlBackgroundColor之后，我看到这种行为基本正常。也可以删除我的clearColor修复程序 然而，这肯定不是在过去的工作与选择的颜色。您能提供关于OS或Xcode何时修复的信息吗？Apple Developer Relations: 这在Xcode中是固定的。