如何在QML中使用GridLayout展示QAbstractTableModel表格模型内容？

QAbstractTableModel本身基于行列结构设计，要在QML中展示它的内容，有两种主流实现方式，以下是具体步骤：

方法一：使用Qt Quick Controls的TableView（推荐） #

Qt Quick Controls提供的TableView是专门适配表格模型的组件，性能和易用性都更优，适合绝大多数场景。

1. 将模型暴露给QML上下文 #

在C++代码中把你的自定义TableModel实例注册到QML上下文：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "yourtablemodel.h" // 你的QAbstractTableModel派生类

int main(int argc, char *argv[]) {
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    YourTableModel tableModel;
    engine.rootContext()->setContextProperty("myTableModel", &tableModel);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

2. QML中配置TableView #

直接绑定模型，通过列定义或自定义委托渲染单元格：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 600
    height: 400
    title: "表格模型展示"

    TableView {
        anchors.fill: parent
        model: myTableModel

        // 定义列，指定标题、宽度和对应的数据角色
        TableViewColumn {
            role: "display" // 对应Qt::DisplayRole
            title: "第一列"
            width: 150
        }
        TableViewColumn {
            role: "display"
            title: "第二列"
            width: 150
            column: 1 // 指定对应模型的列索引
        }

        // 可选：自定义单元格样式
        delegate: Item {
            anchors.fill: parent
            Text {
                text: model.display
                anchors.centerIn: parent
                color: index.row % 2 == 0 ? "#f5f5f5" : "#ffffff"
            }
        }
    }
}

模型侧补充：角色映射 #

如果需要更精准的列数据映射，在自定义TableModel中重写roleNames()，为不同列定义专属角色：

#include <QAbstractTableModel>

class YourTableModel : public QAbstractTableModel
{
    Q_OBJECT
public:
    enum CustomRoles {
        Column0Role = Qt::UserRole + 1,
        Column1Role
    };

    QHash<int, QByteArray> roleNames() const override {
        QHash<int, QByteArray> roles;
        roles[Column0Role] = "column0";
        roles[Column1Role] = "column1";
        return roles;
    }

    QVariant data(const QModelIndex &index, int role) const override {
        if (!index.isValid()) return QVariant();
        int row = index.row();
        int col = index.column();
        switch(role) {
            case Column0Role:
                if (col == 0) return m_tableData[row][0]; // m_tableData为你的数据存储容器
                break;
            case Column1Role:
                if (col == 1) return m_tableData[row][1];
                break;
        }
        return QVariant();
    }

    // 必须实现的rowCount、columnCount等方法省略...
private:
    QList<QList<QVariant>> m_tableData;
};

方法二：用Repeater嵌套GridLayout（自定义布局） #

如果需要完全自定义表格结构（比如非常规的单元格排版），可以用嵌套Repeater配合GridLayout手动渲染：

import QtQuick 2.15
import QtQuick.Layouts 1.15

Item {
    anchors.fill: parent
    property int colCount: myTableModel.columnCount()
    property int rowCount: myTableModel.rowCount()

    GridLayout {
        anchors.fill: parent
        columns: colCount

        // 渲染表头
        Repeater {
            model: colCount
            Text {
                text: "列" + (index + 1)
                font.bold: true
                Layout.fillWidth: true
                padding: 8
                horizontalAlignment: Text.AlignHCenter
                background: Rectangle { color: "#eee" }
            }
        }

        // 渲染表格内容
        Repeater {
            model: rowCount * colCount
            Text {
                property int currentRow: Math.floor(index / colCount)
                property int currentCol: index % colCount
                text: myTableModel.data(myTableModel.index(currentRow, currentCol), Qt.DisplayRole)
                Layout.fillWidth: true
                padding: 8
                horizontalAlignment: Text.AlignHCenter
                border.width: 1
                border.color: "#ddd"
            }
        }
    }
}

这种方式需要手动计算单元格的行列索引，适合高度定制化场景，但数据量大时性能不如TableView。

关键注意事项 #

• 确保自定义TableModel正确实现rowCount()、columnCount()和data()方法，这是QML获取数据的基础。
• 模型数据更新时，要正确触发dataChanged()、beginInsertRows()/endInsertRows()等信号，保证QML界面同步刷新。
• Qt 6中TableViewColumn已被废弃，改用columns数组定义列：

// Qt 6 写法示例
TableView {
    model: myTableModel
    columns: [
        { title: "列1", width: 150, delegate: Text { text: model.column0 } },
        { title: "列2", width: 150, delegate: Text { text: model.column1 } }
    ]
}

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