MacOS Cocoa NSTableView如何实现跨全列的分组标题行？

最优方案为使用 NSTableView 原生组行（Group Row）特性，原生支持跨所有列展示标题，自动适配滚动、列宽变化、层级展示，无需手动处理悬浮控件逻辑。

前置认知澄清 #

• isGroupRowStyle 是 NSTableRowView 的官方属性，用于标记当前行为组标题行，系统会自动让该行内容忽略列拆分，横跨全表宽度
• Sections 功能并非 iOS 独有，macOS 10.10+ 版本的 NSTableView 已完整支持，和组行特性配合刚好适配「分组标题+多条业务数据」的数据源结构
• 手动添加悬浮 NSTextField 的方案可行但非必要，原生特性已经处理了所有边界场景的兼容，无需重复造轮子

具体实现步骤 #

1. 改造数据源结构 #

将原平铺数据改造为分组结构，对应你「每个条目对应一个标题+多行数据」的需求：

// 自定义分组结构
struct TableSection {
    let title: String // 组标题，比如示例里的"Her"
    let items: [BusinessModel] // 组内的业务数据，对应每一行的Page、Term、Popularity字段
}

// 视图控制器内持有分组数据源
var sections: [TableSection] = []

2. 实现表格数据源方法 #

// 返回分组总数
func numberOfSections(in tableView: NSTableView) -> Int {
    return sections.count
}

// 返回单个分组内的业务数据行数
func tableView(_ tableView: NSTableView, numberOfRowsInSection section: Int) -> Int {
    return sections[section].items.count
}

// 标记组标题行：每个分组的首行即为跨列标题行
func tableView(_ tableView: NSTableView, isGroupRow row: Int) -> Bool {
    let (section, rowInSection) = tableView.sectionAndRow(forRow: row)
    return rowInSection == 0
}

3. 渲染标题行与普通行 #

在你已有的tableView(_:viewFor:row:)方法中增加组标题行的判断逻辑：

func tableView(_ tableView: NSTableView, viewFor tableColumn: NSTableColumn?, row: Int) -> NSView? {
    // 处理组标题行
    if tableView.isGroupRow(row) {
        let headerID = NSUserInterfaceItemIdentifier("GroupHeaderCell")
        guard let cell = tableView.makeView(withIdentifier: headerID, owner: self) as? NSTableCellView else {
            // 新建标题行单元格
            let cell = NSTableCellView(frame: .zero)
            cell.identifier = headerID
            let titleLabel = NSTextField(labelWithString: "")
            titleLabel.textColor = .white
            titleLabel.font = .systemFont(ofSize: 13, weight: .medium)
            titleLabel.translatesAutoresizingMaskIntoConstraints = false
            cell.addSubview(titleLabel)
            // 约束仅控制左右边距和垂直居中，宽度自动跟随表格宽度拉伸
            NSLayoutConstraint.activate([
                titleLabel.leadingAnchor.constraint(equalTo: cell.leadingAnchor, constant: 8),
                titleLabel.centerYAnchor.constraint(equalTo: cell.centerYAnchor)
            ])
            cell.textField = titleLabel
            return cell
        }
        let (section, _) = tableView.sectionAndRow(forRow: row)
        cell.textField?.stringValue = sections[section].title
        return cell
    }
    
    // 原有普通业务行的渲染逻辑保持不变，处理Page、Term、Popularity三列的内容即可
    // ...
}

4. 自定义行样式 #

在你已有的自定义 NSTableRowView 中增加组行样式判断：

class CustomTableRowView: NSTableRowView {
    override func draw(_ dirtyRect: NSRect) {
        // 组标题行使用黑底样式
        if isGroupRowStyle {
            NSColor.black.setFill()
            dirtyRect.fill()
            return
        }
        // 原有普通行浅蓝样式逻辑保持不变
        // ...
    }
}

低版本兼容方案 #

如果需要兼容 macOS 10.10 以下版本，可以选择自定义 NSTableRowView 手动添加悬浮文本框的方案：在自定义行的layout()方法中，直接将文本框的宽度设置为当前行视图的总宽度，忽略列宽限制即可。

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