QT Quick QML 实例之定制 TableView

2024-08-25 04:52
文章标签 定制 qt 实例 tableview qml quick

本文主要是介绍QT Quick QML 实例之定制 TableView，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

QT Quick QML 实例之定制 TableView

  • 一、演示
  • 二、C++关键步骤
    • 1. beginInsertRows()（用户插入行）
    • 2. roleNames() （表格中列映射）
    • 3. data() （用户获取数据）
    • 4. headerData() （表头）
    • 5. flags (某个单元格的特性标志)
    • 6. setData (用户更新数据)
  • 三、QML UI 显示

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

GIT工程源码在这里:     QmlLearningPro ，编译选择 TableView

QML其它文章请点击这里:     QT QUICK QML 学习笔记

一、演示

● 效果如下：
请添加图片描述

二、C++关键步骤

在Qt中，如使用 QML 的 TableView 并且想要将数据与C++类进行绑定，通常会继承 QAbstractTableModel 来实现自定义的数据模型

1. beginInsertRows()（用户插入行）

beginInsertRows 是 Qt 中的 QAbstractItemModel 类的一部分，用于通知视图 (view) 即将向模型 (model) 中插入行。这个方法通常与 endInsertRows 配对使用，以确保模型的内部数据和视图保持一致。

void MyModel::insertRows(int position, int rows, const QModelIndex &parent = QModelIndex()) {// 通知视图即将插入行beginInsertRows(parent, position, position + rows - 1);// 执行实际的数据插入操作// 例如：for (int row = 0; row < rows; ++row) {dataList.insert(position, newRowData);}// 通知视图插入行操作已经完成endInsertRows();
}

2. roleNames() （表格中列映射）

roleNames() 是 QAbstractItemModel 类中的一个虚函数，通常用于返回模型中的角色（roles）与角色名称（role names）之间的映射。角色在 Qt 的模型-视图框架中用于区分不同类型的数据（例如显示数据、编辑数据、工具提示等）。

//为每个角色提供一个名称，主要用于 QML 绑定。
QHash<int, QByteArray> TargetCoordinate::roleNames() const
{QHash<int, QByteArray> roles;roles.insert(lngRole,  "lng");roles.insert(latRole,  "lat");roles.insert(altRole,  "alt");return roles;
}

QML 中使用：

	TableViewColumn {role: "lng"   //来源于C++中roleNamestitle: "Longitude"resizable: true}TableViewColumn {role: "lat"   title: "Latitude"resizable: true}TableViewColumn {role: "alt"  title: "Altitude"resizable: true}

3. data() （用户获取数据）

在 Qt 的 QAbstractItemModel 类中，data() 函数用于返回模型中某个特定项的数据信息。这个函数通常和 roleNames() 函数结合使用，以便为不同的角色返回相应的数据。

视图（如ListView）中请求模型的数据时，视图会调用 data() 函数，并传递相应的 QModelIndex 和 role， data() 函数会根据这些参数返回对应的数据。

QVariant TargetCoordinate::data(const QModelIndex &index, int role) const
{if (!index.isValid())return QVariant();if (index.row() < 0 || index.row() >= m_coordinates.count())return QVariant();const QGeoCoordinate &coordinate = m_coordinates.at(index.row());switch(role){case lngRole:return QString::number(coordinate.longitude(), 'f', 6);case latRole:return QString::number(coordinate.latitude(), 'f', 6);case altRole:return QString::number(coordinate.altitude(), 'f', 2);}return QVariant();
}

data() 和 roleNames()关系：

data()：提供模型项在特定角色下的数据。
roleNames()：为每个角色提供一个名称，主要用于 QML 绑定。

4. headerData() （表头）

headerData() 是 QAbstractItemModel 类中的另一个重要虚函数，用于提供模型的表头信息。在 Qt 的模型-视图框架中，表头用于显示列标题或行标题，通常用于 QTableView、QTreeView 或类似的视图中。

QVariant TargetCoordinate::headerData(int section, Qt::Orientation orientation, int role) const
{if (role != Qt::DisplayRole)return QVariant();/* 当请求的方向为 Qt::Horizontal 时，我们返回与请求的 section（列索引）相关的表头数据。*/if (orientation == Qt::Horizontal) {if (section == 0)return tr("lng");else if (section == 1)return tr("lat");else if (section == 2)return tr("alt");}return QVariant();
}

headerData() 通常与 data() 一起使用，前者用于表头的显示，后者用于表格中具体单元格的显示。

5. flags (某个单元格的特性标志)

flags 用于返回模型中某个项的特性标志（flags）。这些标志指示该项是否可选中、可编辑、可拖放等行为。通过重写 flags() 函数，可以控制模型中每个项的交互行为。

Qt::ItemFlags TargetCoordinate::flags(const QModelIndex &index) const
{qDebug() << "flags()" ;if (!index.isValid())return Qt::NoItemFlags;return Qt::ItemIsEditable | QAbstractTableModel::flags(index);
}

常见的 Qt::ItemFlag 枚举值：

Qt::NoItemFlags: 表示没有特性，项不可交互。
Qt::ItemIsSelectable: 该项是可选择的。
Qt::ItemIsEditable: 该项是可编辑的。
Qt::ItemIsDragEnabled: 该项支持拖动操作。
Qt::ItemIsDropEnabled: 该项支持放置操作。
Qt::ItemIsUserCheckable: 该项可以显示一个复选框，允许用户进行选择。
Qt::ItemIsEnabled: 该项是可用的（如果未设置，则该项将显示为禁用状态）。

6. setData (用户更新数据)

功能：

编辑数据: 当用户在视图中编辑数据（如在表格单元格中输入文本或选择复选框）时，视图会调用 setData() 函数，模型根据提供的新数据更新相应的项。

拖放操作: 如果支持拖放操作，当数据被放置到模型中的某个位置时，setData() 可能会被调用以插入新数据。

批量数据更新: 你可以在外部批量修改模型的数据，每次修改后调用 setData() 更新特定的项

bool TargetCoordinate::setData(const QModelIndex &index, const QVariant &value, int role)
{if (!index.isValid() || role != Qt::EditRole)return false;if (index.row() < 0 || index.row() >= m_coordinates.count())return false;QGeoCoordinate &coordinate = m_coordinates[index.row()];if (index.column() == 0)coordinate.setLongitude(value.toDouble());else if (index.column() == 1)coordinate.setLatitude(value.toDouble());else if (index.column() == 2)coordinate.setAltitude(value.toDouble());//表示仅有一个单元格的数据发生了更改emit dataChanged(index, index);return true;
}

组合使用
setData() 与 data()：setData() 用于更新数据，而 data() 则用于获取数据。视图在显示数据时调用 data()，在用户修改数据时调用 setData()。

flags()：在 flags() 函数中设置 Qt::ItemIsEditable 标志，以确保该项可编辑。只有当项是可编辑的，视图才会调用 setData()。

dataChanged 信号：在 setData() 中调用 emit dataChanged(index, index)，通知视图相应项的数据已经改变。视图会自动重新绘制受影响的项。

三、QML UI 显示

TableView {id: tableViewanchors.margins:    10anchors.fill:       parentmodel:       coordinateModel//表格属性itemDelegate: {return editableDelegate;}rowDelegate: Rectangle {color : styleData.selected ? "#7db9f7" : (styleData.alternate ? "#f5f1f1":"#a89d9d")height: 30}TableViewColumn {role: "lng"   //来源于C++中roleNamestitle: "Longitude"resizable: true}TableViewColumn {role: "lat"   //ytitle: "Latitude"
//                width: 120resizable: true}TableViewColumn {role: "alt"   //title: "Altitude"resizable: true}headerDelegate: Rectangle {implicitWidth: heardText.widthimplicitHeight: heardText.height * 1.6gradient:       styleData.pressed ? pressG : (styleData.containsMouse ? hoverG: normalG)border.width: 1border.color: "gray"Text {id:     heardTextanchors.centerIn: parentfont.pixelSize: 22text:           styleData.valuecolor:          styleData.pressed ? "red" : "blue"font.bold: true}}Component {id: editableDelegateRectangle {border.color: "gray"border.width: 1Item{anchors.centerIn: parentheight:  showTXT.height * 1.2width:   showTXT.width * 1.2Text {id:showTXTanchors.centerIn: parentelide: styleData.elideModetext: styleData.value !== undefined ? styleData.value : ""color: styleData.selected ? "red" : "black"//styleData.textColorfont.pixelSize:  18horizontalAlignment: Text.AlignHCenter}}}}RowLayout {anchors.horizontalCenter:   rootRect.horizontalCenteranchors.top:                rootRect.bottomanchors.topMargin:          20Button {text:  "add"onClicked:      {coordinateModel.insertRowsCoor(tableView.currentRow+1, 1);tableView.currentRow = tableView.currentRow + 1tableView.refreshTableView}}Button {text:  "delete"onClicked:      {if(tableView.rowCount ===0)  returnif(tableView.currentRow === -1)    coordinateModel.removeRowsCoor(tableView.currentRow-1);else    coordinateModel.removeRowsCoor(tableView.currentRow);tableView.refreshTableView}}}

具体代码见工程源码

GIT 工程文件点击这里:     QmlLearningPro ，编译选择 TableView

QML 其它文章请点击这里:     QT QUICK QML 学习笔记

这篇关于QT Quick QML 实例之定制 TableView的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1104595。

相关文章

嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程（Gaussian Process，简称GP）是一种概率模型，用于描述一组随机变量的联合概率分布，其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数（或核函数） 1.3 核函数1.4 高斯过程回归（Gauss
阅读更多...
C++操作符重载实例(独立函数)

C++操作符重载实例(独立函数)

C++操作符重载实例，我们把坐标值CVector的加法进行重载，计算c3=c1+c2时，也就是计算x3=x1+x2，y3=y1+y2，今天我们以独立函数的方式重载操作符+（加号），以下是C++代码： c1802.cpp源代码： D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数
阅读更多...
实例：如何统计当前主机的连接状态和连接数

实例：如何统计当前主机的连接状态和连接数

统计当前主机的连接状态和连接数 在 Linux 中，可使用 ss 命令来查看主机的网络连接状态。以下是统计当前主机连接状态和连接主机数量的具体操作。 1. 统计当前主机的连接状态 使用 ss 命令结合 grep、cut、sort 和 uniq 命令来统计当前主机的 TCP 连接状态。 ss -nta | grep -v '^State' | cut -d " " -f 1 | sort |
阅读更多...
Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】 现很多网站为了实现即时通讯，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发 出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏 览器需要不断的向服务器发出请求，然而HTTP
阅读更多...
【QT】基础入门学习

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数，argv是
阅读更多...
Python QT实现A-star寻路算法

Python QT实现A-star寻路算法

目录 1、界面使用方法 2、注意事项 3、补充说明 用Qt5搭建一个图形化测试寻路算法的测试环境。 1、界面使用方法 设定起点： 鼠标左键双击，设定红色的起点。左键双击设定起点，用红色标记。 设定终点： 鼠标右键双击，设定蓝色的终点。右键双击设定终点，用蓝色标记。 设置障碍点： 鼠标左键或者右键按着不放，拖动可以设置黑色的障碍点。按住左键或右键并拖动，设置一系列黑色障碍点
阅读更多...
使用Qt编程QtNetwork无法使用

使用Qt编程QtNetwork无法使用

使用 VS 构建 Qt 项目时 QtNetwork 无法使用的问题 - 摘叶飞镖 - 博客园 (cnblogs.com) 另外,强烈建议在使用QNetworkAccessManager之前看看这篇文章: Qt 之 QNetworkAccessManager踏坑记录-CSDN博客 C++ Qt开发：QNetworkAccessManager网络接口组件 阅读目录 1.1 通用API函数
阅读更多...
828华为云征文｜华为云Flexus X实例docker部署rancher并构建k8s集群

828华为云征文｜华为云Flexus X实例docker部署rancher并构建k8s集群

828华为云征文｜华为云Flexus X实例docker部署rancher并构建k8s集群 华为云最近正在举办828 B2B企业节，Flexus X实例的促销力度非常大，特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求，一定不要错过这个机会。赶紧去看看吧！ 什么是华为云Flexus X实例 华为云Flexus X实例云服务是新一代开箱即用、体
阅读更多...
PDFQFZ高效定制：印章位置、大小随心所欲

PDFQFZ高效定制：印章位置、大小随心所欲

前言 在科技编织的快节奏时代，我们不仅追求速度，更追求质量，让每一分努力都转化为生活的甜蜜果实——正是在这样的背景下，一款名为PDFQFZ-PDF的实用软件应运而生，它以其独特的功能和高效的处理能力，在PDF文档处理领域脱颖而出。 它的开发，源自于对现代办公效率提升的迫切需求。在数字化办公日益普及的今天，PDF作为一种跨平台、不易被篡改的文档格式，被广泛应用于合同签署、报告提交、证书打印等各个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2