QML学习十八：TableView的简单使用（使用C++Model)

若该文为原创文章，转载请注明原文出处

一、前言

在QT下使用表格是想当的多，使用C++自定义Mode在TableView中显示方法和ListView操作方式类似，TableView下增加了很多表头等操作方便自定义表格。在此不涉及。

本篇记录TableView显示C++的Model。

二、例子

1、创建model文件

2、创建数据

 3、重写函数

 

4、注册C++函数

 

5、QML访问

 

 三、完整代码

1、main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "myobject.h"

#include "QTableModel.h"

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

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    QTableModel tableModel;
    engine.rootContext()->setContextProperty("QTableModel", &tableModel);

    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}

2、QTableModel.h

#ifndef QTABLEMODEL_H
#define QTABLEMODEL_H

#include <QAbstractTableModel>
#include <QObject>

struct STUDENT_INFO {
    QString qsName;
    int age;
};

class QTableModel : public QAbstractTableModel
{
    Q_OBJECT

public:
    explicit QTableModel(QObject *parent = nullptr);

    Q_INVOKABLE QAbstractItemModel *model();

public:
    enum TABLE_ITEM_ROLE
    {
        studentNameRole = Qt::DisplayRole+1,
        studentAgeRole,
    };


    // Basic functionality:
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    int columnCount(const QModelIndex &parent = QModelIndex()) const override;

    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;

    QHash <int, QByteArray> roleNames() const override;
    QModelIndex index(int row, int column, const QModelIndex &parent) const override;

private:
    QList <STUDENT_INFO> m_data;
    QHash<int, QByteArray> m_roleName;
};

#endif // QTABLEMODEL_H

3、QTableModel.cpp

#include "QTableModel.h"

QTableModel::QTableModel(QObject *parent)
    : QAbstractTableModel(parent)
{
    m_data = {
        {"XiaoZhao",24},
        {"XiaoFeng",20},
        {"XiaoLi",21},
        {"XiaoLin",22},
        {"XiaoWang",27},
    };

    m_roleName.insert(studentNameRole, "studentName");
    m_roleName.insert(studentAgeRole, "studentAge");
}

QAbstractItemModel *QTableModel::model()
{
    return this;
}


int QTableModel::rowCount(const QModelIndex &parent) const
{
    if (parent.isValid())
        return 0;

    // FIXME: Implement me!
    return m_data.count();
}

int QTableModel::columnCount(const QModelIndex &parent) const
{
    if (parent.isValid())
        return 0;

    // FIXME: Implement me!
    return 2;
}

QVariant QTableModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    switch(role)
    {
    case studentNameRole:
        return m_data[index.row()].qsName;
    case studentAgeRole:
        return m_data[index.row()].age;
    default:
        break;
    }

    // FIXME: Implement me!
    return QVariant();
}

QModelIndex QTableModel::index(int row, int column, const QModelIndex &parent) const
{
    if(!hasIndex(row, column, parent))
    {
        return QModelIndex();
    }

    return createIndex(row, column, parent.internalId());
}

QHash<int, QByteArray> QTableModel::roleNames() const
{
    return m_roleName;
}

4、main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12

Window {
    id: window
    visible: true
    width: 700
    height: 600
    title: qsTr("QML自定义组件")


    Rectangle {
        id: baseRct

        anchors.fill: parent
        color: "lightblue"

        MyTableView {
            anchors.centerIn: parent
        }
    }
}

5、MyTableView.qml

import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQml.Models 2.2

Rectangle {
    id: tableViewRct

    width: 500
    height: 500

    border.color: "red"
    border.width: 2

    TableView {
        id: tableView

        anchors.fill: parent

        Component.onCompleted: {
            model = QTableModel.model();
        }

        itemDelegate: tableViewDelegate
        headerDelegate: Rectangle {
            height: 35
            Text {
                anchors.centerIn: parent
                text: styleData.value
                color: "#46a4bb"
            }
        }

        TableViewColumn {
            role: "studentName"
            title: "name"
            width: 100
        }

        TableViewColumn {
            role: "studentAge"
            title: "age"
            width: 100
        }
    }

    Component {
        id: tableViewDelegate

        Rectangle {
            height: 50
            width: 100

            Text {
                anchors.centerIn: parent
                color: "red"
                elide: styleData.elideMode
                text: styleData.value
                font.pointSize: 10
                font.bold: true
            }
        }
    }
}

编译结果：

 

如有侵权，请及时联系博主删除，VX：18750903063