大家好，我现在在Qt6环境下用Qt Quick Controls 2做一个TableView，想要实现的效果是：表头有两列，第一列显示“Lattice”，第二列为空；表格内容行里，第一列是晶格参数的标签（a、b、c、α、β、γ），第二列是对应的带单位的数值。

我已经在自定义的LatticeTableModel里实现了headerData和data方法，但运行后发现表头完全不显示，想请大家帮忙看看问题出在哪。

自定义Model的代码 #

headerData方法 #

QVariant LatticeTableModel::headerData(int section,
                                       Qt::Orientation orientation,
                                       int role) const
{
    if (role != Qt::DisplayRole)
        return {};

    if (orientation == Qt::Horizontal) {
        switch (section) {
            case 0: return QStringLiteral("Lattice");
            case 1: return QStringLiteral("");
            default: return {};
        }
    }
    return {};
}

data方法 #

QVariant LatticeTableModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid() || role != Qt::DisplayRole || !m_controller)
        return {};

    const int r = index.row();
    const int c = index.column();

    auto labelOrValue = [&](const char* label, const std::string &value) -> QVariant {
        return (c == 0) ? QVariant(label) : QVariant(QString::fromStdString(value));
    };

    switch (r) {
        case 0: return labelOrValue("a", std::format("{:.3f} Å", m_controller->a()));
        case 1: return labelOrValue("b", std::format("{:.3f} Å", m_controller->b()));
        case 2: return labelOrValue("c", std::format("{:.3f} Å", m_controller->c()));
        case 3: return labelOrValue("α", std::format("{:.3f} °", m_controller->alpha()));
        case 4: return labelOrValue("β", std::format("{:.3f} °", m_controller->beta()));
        case 5: return labelOrValue("γ", std::format("{:.3f} °", m_controller->gamma()));
        default: return {};
    }
}

我的QML代码 #

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    required property var lController
    required property var lModel

    ColumnLayout {
        anchors.fill: parent
        spacing: 6

        Label {
            font.bold: true
            text: "Lattice Information"
        }
        Frame {
            Layout.fillHeight: false
            Layout.fillWidth: true
            Layout.preferredHeight: 240
            padding: 8

            Item {
                anchors.fill: parent

                HorizontalHeaderView {
                    id: horizontalHeader

                    anchors.left: tv.left
                    anchors.right: tv.right
                    anchors.top: parent.top
                    clip: true
                    height: 32
                    syncView: tv

                    delegate: Rectangle {
                        required property int section

                        border.color: "#00000022"
                        border.width: 1
                        color: "#efefef"              
                        implicitHeight: 32
                        implicitWidth: 200

                        Text {
                            anchors.fill: parent
                            anchors.leftMargin: 8
                            anchors.rightMargin: 8
                            elide: Text.ElideRight
                            font.bold: true
                            horizontalAlignment: section === 0 ? Text.AlignLeft : Text.AlignRight

                            text: display
//text: model.display does also not help
                            verticalAlignment: Text.AlignVCenter
                        }
                    }
                }
                TableView {
                    id: tv

                    anchors.bottom: parent.bottom
                    anchors.fill: parent
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: horizontalHeader.bottom
                    clip: true
                    columnSpacing: 0
                    columnWidthProvider: function (col) {
                        const first = 30;
                        const restCols = Math.max(1, tv.columns - 1);
                        if (col === 0)
                            return first;
                        return Math.max(80, (tv.width - first) / restCols);
                    }
                    model: lModel
                    rowHeightProvider: function (row) {
                        return 28;
                    }
                    rowSpacing: 0

                    delegate: Rectangle {
                        required property int column
                        required property var display
                        required property int row

                        border.color: "#00000022"
                        border.width: 1

                        
                        color: column === 0 ? "#e8f2ff" : (row % 2 === 0 ? "#ffffff" : "#fafafa")
                        implicitHeight: 28

                        Text {
                            anchors.fill: parent
                            anchors.leftMargin: 8
                            anchors.rightMargin: 8
                            elide: Text.ElideRight
                            horizontalAlignment: column === 0 ? Text.AlignLeft : Text.AlignRight

                  
                            text: {
                                if (column === 0)
                                    return display;
                                const n = Number(display);
                                return isNaN(n) ? display : n.toFixed(6);
                            }
                            verticalAlignment: Text.AlignVCenter
                        }
                    }
                }
            }
        }// end Frame
    } // end ColumnLayout
} // end Item

我原本以为HorizontalHeaderView会读取headerData里的内容显示表头，但实际运行后，表格只有下方的内容行，顶部的表头栏完全没显示出来。我试过把delegate里的text改成model.display也没用，实在找不到问题所在，求各位大佬指点一下！

备注：内容来源于stack exchange，提问作者Suslik