如何设置QML HorizontalHeaderView宽度以适配列标题而非仅数据？

问题背景 #

在Windows 11环境下，使用Qt Creator 13.0.0 + Qt 6.6.0开发Qt Quick项目，基于自定义QAbstractTableModel实现数据展示，TableView可正常渲染数据，但添加HorizontalHeaderView作为列标题后，列宽仅适配表格单元格的数据内容，导致标题文本被截断。无数据时列宽显示正常，尝试给HorizontalHeaderView设置独立委托后问题仍未解决。

异常效果：

现有代码片段：

HorizontalHeaderView代码 #

HorizontalHeaderView {
    id: horizontalHeader
    anchors.left: tableView.left
    anchors.top: parent.top
    syncView: tableView
    clip: true
}

TableView代码 #

TableView {
    id: tableView
    anchors {
        left: verticalHeader.right
        top: horizontalHeader.bottom
        right: parent.right
        bottom: parent.bottom
    }

    clip: true
    columnSpacing: 1
    rowSpacing: 1

    selectionModel: ItemSelectionModel {}
    model: OrderBookData

    delegate: Rectangle {
        id: rectangleDelegate
        implicitWidth: txt.implicitWidth
        implicitHeight: 32
        border.width: 1
        Text {
            id: txt
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            leftPadding: 8
            rightPadding: 8
            text: display
            verticalAlignment: Text.AlignVCenter
        }
    }
}

问题原因 #

当前TableView的列宽完全由单元格委托的implicitWidth（即数据内容的宽度）决定，而HorizontalHeaderView通过syncView同步了TableView的列宽，导致标题的宽度被单元格数据的宽度限制。当表格无数据时，没有单元格作为参考，列宽会自动 fallback 到标题的默认宽度，因此显示正常。

解决方案 #

方案1：动态适配标题与单元格的最大宽度 #

给HorizontalHeaderView添加自定义委托计算标题宽度，同时在TableView中通过columnWidthProvider取标题和单元格宽度的最大值：

1. 修改HorizontalHeaderView，添加自定义委托：

HorizontalHeaderView {
    id: horizontalHeader
    anchors.left: tableView.left
    anchors.top: parent.top
    syncView: tableView
    clip: true

    delegate: Rectangle {
        implicitWidth: headerText.implicitWidth + 16 // 匹配单元格的左右padding
        implicitHeight: 32
        border.width: 1
        Text {
            id: headerText
            anchors.fill: parent
            leftPadding: 8
            rightPadding: 8
            text: display
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideNone // 禁止文本省略
        }
    }
}

2. 在TableView中添加列宽提供器：

TableView {
    // 保留原有代码...

    columnWidthProvider: function(column) {
        // 获取标题委托的宽度
        const headerDelegate = horizontalHeader.columnDelegate(column);
        const headerWidth = headerDelegate ? headerDelegate.implicitWidth : 100;
        // 获取单元格内容的宽度（可根据实际数据调整）
        const sampleText = OrderBookData.data(OrderBookData.index(0, column), Qt.DisplayRole);
        const cellFont = txt.font;
        const cellWidth = QFontMetrics(cellFont).horizontalAdvance(sampleText) + 16;
        // 返回两者的最大值
        return Math.max(headerWidth, cellWidth);
    }
}

方案2：设置最小列宽 #

如果不需要动态适配，可直接给TableView设置最小列宽，确保标题能完整显示：

TableView {
    // 保留原有代码...
    minimumColumnWidth: 120 // 根据标题长度调整数值
}

方案3：在C++模型中提供列宽提示 #

重写自定义QAbstractTableModel的headerData方法，返回列宽的尺寸提示，让TableView自动参考该值设置列宽：

#include <QFontMetrics>

QVariant OrderBookData::headerData(int section, Qt::Orientation orientation, int role) const
{
    if (orientation == Qt::Horizontal) {
        if (role == Qt::SizeHintRole) {
            // 根据标题文本计算宽度，加上padding
            QFont font;
            QFontMetrics fm(font);
            QString title = this->headerData(section, orientation, Qt::DisplayRole).toString();
            return fm.horizontalAdvance(title) + 16;
        }
        if (role == Qt::DisplayRole) {
            // 返回你的列标题文本
            return QStringLiteral("列%1").arg(section + 1);
        }
    }
    return QAbstractTableModel::headerData(section, orientation, role);
}

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