暗黑模式下NSPopover中NSSlider渲染异常问题求助

问题描述 #

在macOS Monterey 13.2系统下，将NSSlider作为NSPopover的子视图时，暗黑模式下刻度线显示偏移，但相同视图放入NSWindow中显示正常。已尝试IB设计、修改刻度数、布局约束等方法均无效。使用代码如下：

popover = NSPopover.new;
popover.contentViewController = NSViewController.new;
NSView *view = [[NSView alloc] initWithFrame:NSMakeRect(0, 0, 200, 100)];
NSSlider *slider = [[NSSlider alloc] initWithFrame:NSMakeRect(20, 50, 150, 30)];
slider.numberOfTickMarks = 6;
[view addSubview:slider];
popover.contentViewController.view = view;
[popover showRelativeToRect:self.frame ofView:self.view preferredEdge:NSMaxYEdge];

同时存在疑问：修改NSSlider的tickMarkPosition属性对刻度位置无影响，与文档描述不符，请问遗漏了什么？

解决方案与解释 #

一、NSSlider在NSPopover中暗黑模式刻度偏移 #

这大概率是macOS Monterey 13.2的系统渲染Bug，因为相同视图在NSWindow中表现正常，排除代码操作问题。可以尝试以下几种 workaround：

• 改用AutoLayout替代硬编码Frame：
  硬编码Frame可能导致popover渲染时布局计算异常，用AutoLayout能让系统更准确地处理视图位置：

  popover = [NSPopover new];
  NSViewController *vc = [NSViewController new];
  NSView *contentView = [[NSView alloc] initWithFrame:NSZeroRect];
  contentView.translatesAutoresizingMaskIntoConstraints = NO;
  
  NSSlider *slider = [[NSSlider alloc] initWithFrame:NSZeroRect];
  slider.translatesAutoresizingMaskIntoConstraints = NO;
  slider.numberOfTickMarks = 6;
  slider.minValue = 0;
  slider.maxValue = 5;
  
  [contentView addSubview:slider];
  vc.view = contentView;
  popover.contentViewController = vc;
  
  // 添加约束
  [NSLayoutConstraint activateConstraints:@[
      [slider.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor constant:20],
      [slider.trailingAnchor constraintEqualToAnchor:contentView.trailingAnchor constant:-20],
      [slider.centerYAnchor constraintEqualToAnchor:contentView.centerYAnchor],
      [slider.heightAnchor constraintEqualToConstant:30],
      [contentView.widthAnchor constraintEqualToConstant:200],
      [contentView.heightAnchor constraintEqualToConstant:100]
  ]];
  
  [popover showRelativeToRect:self.frame ofView:self.view preferredEdge:NSMaxYEdge];
  

• 显式设置Popover外观：
  强制Popover使用与系统匹配的外观，避免暗黑模式下的样式冲突：

  popover.appearance = [NSAppearance currentAppearance];
  

• 延迟加载Slider：
  在Popover显示后再添加Slider子视图，避开初始渲染的时机问题：

  [popover showRelativeToRect:self.frame ofView:self.view preferredEdge:NSMaxYEdge];
  dispatch_async(dispatch_get_main_queue(), ^{
      NSSlider *slider = [[NSSlider alloc] initWithFrame:NSMakeRect(20, 50, 150, 30)];
      slider.numberOfTickMarks = 6;
      slider.minValue = 0;
      slider.maxValue = 5;
      [popover.contentViewController.view addSubview:slider];
  });
  

二、tickMarkPosition属性不生效的原因 #

这个属性需要配合明确的数值范围和开启刻度可见才能正常工作，你可能遗漏了设置滑块的minValue和maxValue：

1. 设置数值范围：
   刻度的位置依赖滑块的数值区间计算，必须明确设置minValue和maxValue，否则系统无法正确排列刻度：

   slider.minValue = 0;
   slider.maxValue = 5; // 对应6个刻度（0、1、2、3、4、5）
   

2. 显式开启刻度可见：
   虽然设置numberOfTickMarks > 0会自动开启刻度，但显式设置更稳妥：

   slider.tickMarksVisible = YES;
   

3. 设置刻度位置：
   此时再设置tickMarkPosition就能正常生效，比如：

   slider.tickMarkPosition = NSAboveSlider; // 刻度显示在滑块上方
   // 可选值：NSBelowSlider（下方）、NSBothSides（两侧）
   

这个属性的作用是控制刻度线显示在滑块的上方、下方或两侧，只有当滑块有明确的数值范围时，系统才能正确计算刻度的位置，让设置生效。

内容的提问来源于stack exchange，提问作者jeanlain