具有自定义视图的NSMenuItem在滚动时消失

问题描述

我用NSMenuItem实现了一个NSMenu并为其设置了自定义视图。当菜单可滚动时，将鼠标悬停在▼按钮上滚动将导致某些menuItem消失（或绘制不正确）。希望有人给我一些帮助。我会很感激的。

以下是有关此问题的视频： https://streamable.com/obrbon

这是我的代码：

private func setupMenuItemView(_ menu: NSMenu) {
    let menuItemHeight: CGFloat = 20
    let menuWidth = frame.width
    let textFieldPadding: CGFloat = 10
    for menuItem in menu.items {
        guard !menuItem.title.isEmpty else { continue }
        let menuItemView = MenuItemView(frame: NSRect(x: 0,y: 0,width: Int(menuWidth),height: menuItemHeight))
        let textField = MenuItemTextField(labelWithString: menuItem.title)
        textField.frame = NSRect(
            x: textFieldPadding,y: (menuItemView.frame.height-textField.frame.height)/2,width: menuWidth-textFieldPadding*2,height: textField.frame.height
        )
        textField.lineBreakMode = .byTruncatingTail
        menuItemView.addSubview(textField)
        menuItemView.toolTip = menuItem.title
        menuItem.view = menuItemView
        menuItem.target = self
        menuItem.action = #selector(onMenuItemClicked(_:))
    }
}

fileprivate class MenuItemView: NSView {
    override func mouseUp(with event: NSEvent) {
        guard let menuItem = enclosingMenuItem else { return }
        guard let action = menuItem.action else { return }
        NSApp.sendAction(action,to: menuItem.target,from: menuItem)
        menuItem.menu?.cancelTracking()
    }

    override func draw(_ dirtyRect: NSRect) {
        guard let menuItem = enclosingMenuItem else { return }
        if menuItem.isHighlighted {
            NSColor.alternateSelectedControlColor.set()
        } else {
            NSColor.clear.set()
        }
        NSBezierPath.fill(dirtyRect)
        super.draw(dirtyRect)
    }
}

fileprivate class MenuItemTextField: NSTextField {
    override var allowsVibrancy: Bool {
        return false
    }
}

致电setupMenuItemView()之后，我致电menu.popup()。 希望这些信息对您有所帮助。

解决方法

我无法使您发布的代码正常工作。下面的演示是使用popUpContextual菜单的替代方法，该菜单的子类别文本字段嵌入在menuItem视图中（请注意，使用了与每个menuItem相关联的视图，并且未创建自定义视图类）。文本对齐和截断功能正常。菜单宽度也很灵活，可以设置为与菜单标题字段的宽度匹配。通过将源代码复制/粘贴到新添加的“ main.swift”文件中，然后删除Apple的AppDelegate类，可以在Xcode中运行该演示。

import Cocoa

var view = [NSTextField]()

class TextField: NSTextField {

override func mouseDown(with event: NSEvent) {
 print("selected = \(self.tag)")
 for i:Int in 0..<view.count {
  if(self.tag == i) {
   view[i].backgroundColor = .lightGray
   } else {
   view[i].backgroundColor = .clear
  }
 }
}

}

class AppDelegate: NSObject,NSApplicationDelegate {
var window:NSWindow!
var menu = NSMenu()

let _menuLeft : CGFloat = 40
let _menuTop : CGFloat = 70
let _menuWidth : CGFloat = 70
let _menuItemH : CGFloat = 20

@objc func menuBtnAction(_ sender:AnyObject ) { 
let menuOrigin = NSMakePoint(_menuLeft,sender.frame.origin.y - 5)
let wNum : Int = sender.window.windowNumber
let event  = NSEvent.mouseEvent(with:.leftMouseDown,location:menuOrigin,modifierFlags:[],timestamp:0,windowNumber:wNum,context:nil,eventNumber:0,clickCount:1,pressure:1.0)
NSMenu.popUpContextMenu(menu,with: event!,for: window.contentView!)
}

func buildMenu() {
 let mainMenu = NSMenu()
 NSApp.mainMenu = mainMenu
 // **** App menu **** //
 let appMenuItem = NSMenuItem()
 mainMenu.addItem(appMenuItem)
 let appMenu = NSMenu()
 appMenuItem.submenu = appMenu
 appMenu.addItem(withTitle: "Quit",action:#selector(NSApplication.terminate),keyEquivalent: "q") 
}
    
func buildWnd() {
    
let _wndW : CGFloat = 400
let _wndH : CGFloat = 300

 window = NSWindow(contentRect:NSMakeRect(0,_wndW,_wndH),styleMask:[.titled,.closable,.miniaturizable,.resizable],backing:.buffered,defer:false)
 window.center()
 window.title = "Swift Test Window"
 window.makeKeyAndOrderFront(window)

let menuItems = ["10%","25%","50%","75%","100%","Longer text."]
menu.title = "Fit"
var count:Int = 0
for mItem in menuItems{
 let menuItem = NSMenuItem()
 menu.addItem(menuItem)
 let textField = TextField(frame:NSMakeRect(0,_menuWidth,_menuItemH))
 menuItem.view = textField
 textField.alignment = .left // .left,.center,.right
 textField.stringValue = mItem
 textField.lineBreakMode = .byTruncatingTail
 textField.backgroundColor = .clear
 textField.isEditable = false
 textField.tag = count
 textField.isBordered = false
 textField.font = NSFont( name:"Menlo bold",size:14 )
 count = count + 1
 view.append(textField) 
}

// **** Menu title **** //
let label = NSTextField (frame:NSMakeRect( _menuLeft,_wndH - 50,24 ))
 window.contentView!.addSubview (label)
 label.autoresizingMask = [.maxXMargin,.minYMargin]
 label.backgroundColor = .clear
 label.lineBreakMode = .byTruncatingTail
 label.isSelectable = false
 label.isBordered = true
 label.font = NSFont( name:"Menlo bold",size:14 )
 label.stringValue = menu.title

// **** Menu Disclosure Button **** //
let menuBtn = NSButton (frame:NSMakeRect( (_menuLeft + _menuWidth) - 20,20,24 ))
 menuBtn.bezelStyle = .disclosure
 menuBtn.autoresizingMask = [.maxXMargin,.minYMargin]
 menuBtn.title = ""
 menuBtn.action = #selector(self.menuBtnAction(_:))
 window.contentView!.addSubview (menuBtn)

// **** Quit btn **** //
let quitBtn = NSButton (frame:NSMakeRect( _wndW - 50,10,40,40 ))
 quitBtn.bezelStyle = .circular
 quitBtn.autoresizingMask = [.minXMargin,.maxYMargin]
 quitBtn.title = "Q"
 quitBtn.action = #selector(NSApplication.terminate)
 window.contentView!.addSubview(quitBtn)
}
 
func applicationDidFinishLaunching(_ notification: Notification) {
 buildMenu()
 buildWnd()
}

func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
 return true
}

}
let appDelegate = AppDelegate()

// **** main.swift **** //
let app = NSApplication.shared
app.delegate = appDelegate
app.setActivationPolicy(.regular)
app.activate(ignoringOtherApps:true)
app.run()

,

第二种可能的选择是使用带有下拉菜单的NSPopUpButton，该菜单通过更改文本颜色来适应DarkMode。和以前一样，每个菜单项.view中都嵌入了一个子类化的文本字段，以支持文本截断和对齐。可以按照先前给出的说明在Xcode中运行。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView ...>

    <LinearLayout ...>

        ...
        ...

    </LinearLayout>

</ScrollView>