QML中TableView与QAbstractTableModel之间的关联探索

背景

项目中有一个比较复杂的表格需要实现，数据来自后台，数据的行或列会动态变化，表头的内容也会改变，要求表格能动态的显示这些数据。需要使用Model/View的结构，，实现前后端的分离。以往在用QML做界面时，模型部分使用的是TableModel（需要导入import Qt.labs.qmlmodels 1.0，参考https://doc.qt.io/qt-5.14/qml-qt-labs-qmlmodels-tablemodel.html），这个模型可以很方便的做与TableView的关联，当然，涉及到模型的数据操作也会在QML中进行。

然而，现在的要求是将模型部分全部移到C++上，使用QAbstractTableModel做后端的逻辑及数据处理，Qt官网上也有相关的例程https://doc.qt.io/qt-5.14/qml-qtquick-tableview.html。

我用的Qt版本是Qt 5.14.2。这次会在官网的例程上做一些补充说明，便于以后更好的使用模型。如果我在文章中有地方说的不明白的或说错的，请大家留言评论，我会做补充和纠正。

QML的TabView 示例

创建C++模型TableModel

新建TableModel类，继承QAbstractTableModel。目录结构如下图所示。

其中基础代码如下，有修改：
tablemodel.h中的代码

#ifndef TABLEMODEL_H
#define TABLEMODEL_H

#include <QAbstractTableModel>

class TableModel : public QAbstractTableModel
{
    Q_OBJECT
public:
    TableModel();

    int rowCount(const QModelIndex & = QModelIndex()) const override
    {
        return 10;
    }

    int columnCount(const QModelIndex & = QModelIndex()) const override
    {
        return 10;
    }

    QVariant data(const QModelIndex &index, int role) const override
    {
        switch (role) {
            case Qt::DisplayRole:
                return QString("%1, %2").arg(index.row()).arg(index.column());
            default:
                break;
        }

        return QVariant();
    }

    QHash<int, QByteArray> roleNames() const override
    {
        return { {Qt::DisplayRole, "display"} };
    }
};

#endif // TABLEMODEL_H

tablemodel.cpp中的代码

#include "tablemodel.h"

TableModel::TableModel()
{

}

注册TableModel类型

在main.cpp中通过qmlRegisterType注册C++类型到QML中。
main.cpp中的代码

#include <QGuiApplication>
#include <QQmlApplicationEngine>

//添加头文件
#include <tablemodel.h>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    //注册C++类型至QML
    qmlRegisterType<TableModel>("TableModel", 0, 1, "TableModel");

    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();
}

创建TableView和绑定模型

在main.qml中创建TableView并绑定模型TableModel
main.qml中的代码

import QtQuick 2.14
import QtQuick.Controls 2.14

//导入C++的类
import TableModel 0.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    TableView {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.fill: parent
        anchors.margins: 24

        interactive: false //禁止拂动

        columnSpacing: 8
        rowSpacing: 8
        clip: true

        model: TableModel {
            id: tableModel
        }

        delegate: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            Label {
                text: display
                anchors.centerIn: parent
            }
        }
    }
}

运行效果：

为了能更好的进行改造，我先对上述代码几个重点进行说明一下：

1. 数据角色

在tablemodel.h的roleNames函数中，返回了QHash类型的{ {Qt::DisplayRole, “display”} }值，对应的，在main.qml->TableView->delegate中，Label的属性text也绑定了display。
这么使用的原因是，QML会根据数据角色属性去使用tablemodel.h中的data()函数查找数据。在QML中如果绑定的属性是display，那么在data()中的role参数等于display对应的值。在tablemodel.h中使用qDebug()打印数据。为了进行测试，修改了tablemodel.h的代码和main.qml的代码
tablemodel.h中的修改代码

QVariant data(const QModelIndex &index, int role) const override
    {
        qDebug() << role << index.row() << index.column();
        switch (role) {
            case Qt::DisplayRole:
                if(index.column() == 0) {
                    return QString("display");
                } else {
                    return QString("");
                }
            case Qt::UserRole:
                if(index.column() == 1) {
                    return QString("user");
                } else {
                    return QString("");
                }
            case Qt::UserRole + 1:
                if(index.column() == 2) {
                    return QString("name");
                } else {
                    return QString("");
                }
            break;
            default:
                break;
        }

        return QVariant();
    }

    QHash<int, QByteArray> roleNames() const override
    {
        return { {Qt::DisplayRole, "display"}, {Qt::UserRole, "user"} , {Qt::UserRole + 1, "name"} };
    }

main.qml中的修改代码

delegate: Rectangle {
            implicitWidth: 50
            implicitHeight: 30

            Label {
                text: display
                anchors.centerIn: parent
            }
            Label {
                text: user
                anchors.centerIn: parent
            }
            Label {
                text: name
                anchors.centerIn: parent
            }
        }

打印的内容中，256是Qt::UserRole的值，257是Qt::UserRole + 1的值，0是Qt::DisplayRole的值。可以看到，在TableView建立后，在代理中的每一个数据角色都会循环调用一遍data()。同时data()的调用是Z字形的，先查询一行的每列，再查询下一行。我这里在处理data()时，第一列显示角色为display的值，第二列显示角色为user的值，第三列显示角色为name的值。

2. 未完待续。。。

今天先写到这里，后续将继续补充QML中TableView和C++ TableModel的联动。