QML Horizo​​ntalHeaderView 未按预期工作

Question

我正在尝试向 QML 中的 TableView 添加标题，但它没有按预期工作。这是示例代码：

主要.cpp：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

质量管理语言：

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls 2.15

Window {
    width: 600
    height: 600
    visible: true

    title: "Player"


    TableView {
        id: tableView
        anchors.fill: parent
        columnSpacing: 1
        rowSpacing: 1
        boundsBehavior: Flickable.StopAtBounds


        model: TableModel {


            id: tabela

            TableModelColumn { display: "type" }
            TableModelColumn { display: "speed" }
            TableModelColumn { display: "ammunition" }
            TableModelColumn { display: "active" }
            TableModelColumn { display: "coordinates" }


            rows: [
                {
                    type: "1",
                    speed: "10",
                    ammunition: "30",
                    active: "True",
                    coordinates: "4x2"

                },
                {
                    type: "3",
                    speed: "0",
                    ammunition: "3",
                    active: "False",
                    coordinates: "10x2"
                },
            ]


        }
        delegate:  Text {
            text: model.display
            padding: 20



            Rectangle {
                anchors.fill: parent
                color: "#efefef"
                z: -1
            }
        }
    }

    HorizontalHeaderView {
        id: horizontalHeader
        syncView: tableView
        anchors.left: tableView.left
        model: TableModel {

            TableModelColumn { display: "type"}
            TableModelColumn { display: "speed" }
            TableModelColumn { display: "ammunition" }
            TableModelColumn { display: "active" }
            TableModelColumn { display: "coordinates" }

        }
    }
}

这是我从这段代码中得到的输出：

为什么标题与表格重叠？我为标题提供了同步视图（tableView），以便将标题同步到表。根据文档：

一旦将此属性绑定到另一个 TableView，标题和表格将在列宽、列间距和水平滑动方面同步。

标题的标签似乎也是错误的。我期待得到“类型”、“速度”等。我还没有找到太多关于 TableModelColumn 的文档，它用于构建标题。

Answer 1

您可以将topMargin属性设置TableView为标题的高度，以使标题行保持在内容行上方。

TableView {
    id: tableView
    topMargin: horizontalHeader.implicitHeight
    model: TableModel {
    }
}

HorizontalHeaderView {
    id: horizontalHeader
    syncView: tableView
    anchors.left: tableView.left
}

并syncView意味着HorizontalHeaderView将使用 的模型TableView，据我了解，您不需要model在 中指定属性HorizontalTableView。