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。

相关文章

Java操作ElasticSearch的实例详解

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创
阅读更多...
使用C#代码计算数学表达式实例

使用C#代码计算数学表达式实例

《使用C#代码计算数学表达式实例》这段文字主要讲述了如何使用C#语言来计算数学表达式,该程序通过使用Dictionary保存变量,定义了运算符优先级,并实现了EvaluateExpression方法来... 目录C#代码计算数学表达式该方法很长，因此我将分段描述下面的代码片段显示了下一步以下代码显示该方法如
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
基于Qt开发一个简单的OFD阅读器

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要
阅读更多...
Oracle Expdp按条件导出指定表数据的方法实例

Oracle Expdp按条件导出指定表数据的方法实例

《OracleExpdp按条件导出指定表数据的方法实例》：本文主要介绍Oracle的expdp数据泵方式导出特定机构和时间范围的数据,并通过parfile文件进行条件限制和配置,文中通过代码介绍... 目录1.场景描述 2.方案分析3.实验验证 3.1 parfile文件3.2 expdp命令导出4.总结
阅读更多...
MySQL的索引失效的原因实例及解决方案

MySQL的索引失效的原因实例及解决方案

《MySQL的索引失效的原因实例及解决方案》这篇文章主要讨论了MySQL索引失效的常见原因及其解决方案,它涵盖了数据类型不匹配、隐式转换、函数或表达式、范围查询、LIKE查询、OR条件、全表扫描、索引... 目录1. 数据类型不匹配2. 隐式转换3. 函数或表达式4. 范围查询之后的列5. like 查询6
阅读更多...
python与QT联合的详细步骤记录

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》：本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho
阅读更多...
QT实现TCP客户端自动连接

QT实现TCP客户端自动连接

《QT实现TCP客户端自动连接》这篇文章主要为大家详细介绍了QT中一个TCP客户端自动连接的测试模型,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录版本 1:没有取消按钮 测试效果测试代码版本 2:有取消按钮测试效果测试代码版本 1:没有取消按钮 测试效果缺陷：无法手动停
阅读更多...
基于Qt实现系统主题感知功能

基于Qt实现系统主题感知功能

《基于Qt实现系统主题感知功能》在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置（如深色模式或浅色模式）自动调整其外观,Qt作为一个跨平台的C++图形用... 目录【正文开始】一、使用效果二、系统主题感知助手类（SystemThemeHelper）三、实现细节
阅读更多...
Qt实现文件的压缩和解压缩操作

Qt实现文件的压缩和解压缩操作

《Qt实现文件的压缩和解压缩操作》这篇文章主要为大家详细介绍了如何使用Qt库中的QZipReader和QZipWriter实现文件的压缩和解压缩功能,文中的示例代码简洁易懂,需要的可以参考一下... 目录一、实现方式二、具体步骤1、在.pro文件中添加模块gui-private2、通过QObject方式创建
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2