用QtQuick Controls 2 中的TableView构建表格

发表时间：2024-10-14 22:14:50

前言

由于QtQuick Controls 1 里的TableView存在严重的性能问题，且事实上QtQuick Controls 1已经处于废弃状态，在Qt5.12中，QtQuick Controls 2更新了 TableView 组件，但新的TableView现在没有定义表头的接口，需要开发者自己实现，这方面资料比较少。在Qt creator的实例中有几个TableView的示例，但都不是sql数据模型的。这里给出了一种使用QSqlQueryModel作为模型在qml实现表格的方法。

代码有两部分构成，一=是自定义的TableView组件，而是作为model的c++模型，这里继承自QSqlQueryModel实现QMLimport QtQuick 2.15import QtQuick.Controls 2.15import QtQuick.Layouts 1.12import com.appSql 1.0Item { id: root property string tableName: "学生表" property int verHeaderHeight: 30 property int verHeaderWidth: 30 property int horHeaderHeight: 30 property variant columnWidthArr: [200,100,100,100,100,100]//定义列宽数组 TableView { id: tableView columnSpacing: 1 columnWidthProvider: function (column) { return root.columnWidthArr[column]; } rowHeightProvider: function (row) { return root.verHeaderHeight; } Layout.margins: 15 anchors{ fill: parent leftMargin: root.verHeaderWidth topMargin: root.horHeaderHeight } model: TableModel{ id: table_model ;m_tableName: tableName} clip: true delegate: Rectangle {//这里是定义表格内容 width: tableView.columnWidthProvider(model.row) height: horHeaderHeight Label { id: label text: model.value anchors.fill: parent anchors.margins: 10 color: "black" font.pixelSize: 15 verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } } } //定义横向表头 Item{ id: header_horizontal anchors{ left: parent.left right: parent.right leftMargin: root.verHeaderWidth } height: root.horHeaderHeight z: 2 Row { id: header_horizontal_row anchors.fill: parent leftPadding: -tableView.contentX clip: true spacing: 0 Repeater { model: tableView.columns > 0 ? tableView.columns : 0 Rectangle { id: header_horizontal_item width: tableView.columnWidthProvider(index)+tableView.columnSpacing height: root.horHeaderHeight color: "#1C77C3" Text { anchors.centerIn: parent text: table_model.headerData(index, Qt.Horizontal) color: "white" } Rectangle{ width: 1 height: parent.height anchors.right: parent.right color: "black" opacity: 0.5 } } } } }//定义纵向表头 Column { id: header_verical anchors{ top: parent.top bottom: parent.bottom topMargin: root.horHeaderHeight } topPadding: -tableView.contentY z: 2 clip: true spacing: 1 Repeater { model: tableView.rows > 0 ? tableView.rows : 0//返回模型的行数，这里需要覆写rowCount函数 Rectangle { width: root.verHeaderWidth height: tableView.rowHeightProvider(index) color: "#1C77C3" Text { anchors.centerIn: parent text: table_model.headerData(index, Qt.Vertical) color: "white" } } } } onTableNameChanged: { console.log("tablename changed!") tableView.forceLayout() }}c++模型实现//tablemodel.h#ifndef TABLEMODEL_H#define TABLEMODEL_H#include #include class tableModel:public QSqlQueryModel{ Q_OBJECT Q_PROPERTY(QString m_tableName READ tableName WRITE setTableName NOTIFY tableNameChanged)public: tableModel(QSqlQueryModel* parent = nullptr); Q_INVOKABLE QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override; QVariant data(const QModelIndex &index, int role) const override; QHash roleNames() const override; int rowCount(const QModelIndex &parent = QModelIndex()) const override; int columnCount(const QModelIndex &parent = QModelIndex()) const override; QString tableName() const; void setTableName(const QString _tableName);signals: void tableNameChanged();private: QString m_tableName; QVector m_tableTitle; QSqlQuery* m_query; QHash m_roleNames;};#endif // TABLEMODEL_H//tablemodel.cpp#include "tablemodel.h"#include #include #include #include tableModel::tableModel(QSqlQueryModel* parent) :QSqlQueryModel(parent), m_tableName(""), m_query(new QSqlQuery(QSqlDatabase::database())){ m_roleNames[Qt::DisplayRole] = "value"; m_roleNames[Qt::EditRole] = "edit"; qDebug()= this->columnCount()) { return v; } if (role & ~(Qt::DisplayRole | Qt::EditRole)) return v; qDebug()

上一篇 大尺寸瓷砖上墙的6种施工方法：空鼓脱落？不存在的<墙面瓷砖铺贴怎么计算平方的>