qml 实现一个listview

主要通过qml实现listvie功能,主要包括右键菜单,滚动条,拖动改变内容等,c++ 与 qml之间的变量和函数的调用。

main.cpp

#include <QQuickItem>
#include <QQmlContext>
#include "testlistmodel.h"
int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;qmlRegisterType<TestListModel>("TestListModel", 1, 0, "TestListModel");engine.load(QUrl(QStringLiteral("qrc:/ui1.qml")));QObject* root = engine.rootObjects().first();QString retVal;QVariant message = "Hello from c++";QVariant returnedValue;QQmlProperty(root,"testmsg").write("hello,world");qDebug()<<"Cpp get qml property height222"<<root->property("msg");bool ret =QMetaObject::invokeMethod(root,"setSignalB",Q_RETURN_ARG(QVariant,returnedValue),Q_ARG(QVariant,message),Q_ARG(QVariant,8));qDebug()<<"returnedValue"<<returnedValue<<root<<ret;return app.exec();
}

listview 的model 代码

TestListModel.h

#ifndef TESTLISTMODEL_H
#define TESTLISTMODEL_H#include <QAbstractListModel>
typedef struct Student
{int     id;QString name;QString sex;
}pStudent;class TestListModel : public QAbstractListModel
{Q_OBJECT
public:explicit TestListModel(QObject *parent = nullptr);int rowCount(const QModelIndex &parent) const;QVariant data(const QModelIndex &index, int role) const;virtual QHash<int, QByteArray> roleNames() const;Qt::ItemFlags flags(const QModelIndex &index) const override;Q_INVOKABLE void modifyItemText(int row1,int row2);Q_INVOKABLE void add();enum MyType{ID=Qt::UserRole+1,Name,Sex};
private:QVector<Student>  m_studentList;signals:void    layoutChanged();
};#endif // TESTLISTMODEL_H

TestListModel.cpp

#include "testlistmodel.h"
#include <QDebug>TestListModel::TestListModel(QObject *parent): QAbstractListModel{parent}
{for(int i=0;i<20;i++){Student oneData;oneData.id = i;oneData.name  = QString("张三%1").arg(i);if(i%2==0){oneData.sex = "female" ;}else{oneData.sex = "male" ;}//qDebug()<<"TestListModel"<<m_studentList.size();m_studentList.append(oneData);}   }int TestListModel::rowCount(const QModelIndex &parent) const
{//qDebug()<<"rowCount"<<m_studentList.size();return m_studentList.size();
}
QVariant TestListModel::data(const QModelIndex &index, int role) const
{// qDebug()<<"TestListModel::data11111111111"<<index.isValid();QVariant var;if ( !index.isValid() ){return QVariant();}int nRow    = index.row();int nColumn = index.column();if(Qt::UserRole+1 == role){var = QVariant::fromValue(m_studentList.at(nRow).id);}else if(Qt::UserRole+2 == role){var = QVariant::fromValue(m_studentList.at(nRow).name);// qDebug()<<"m_listData.at(nRow).name"<<m_listData.at(nRow).name;}else if(Qt::UserRole+3 == role){var = QVariant::fromValue(m_studentList.at(nRow).sex);// qDebug()<<"m_listData.at(nRow).name"<<m_listData.at(nRow).name;}return var;
}QHash<int, QByteArray> TestListModel::roleNames() const
{QHash<int, QByteArray> d;d[MyType::ID]="id";d[MyType::Name]="name";d[MyType::Sex]="sex";qDebug()<<"d .size"<<d.size();return d;
}
Qt::ItemFlags TestListModel::flags(const QModelIndex &index) const
{Q_UNUSED(index)// if(index.column() ==1)// {//     qDebug()<<"UserInfoModel::flags  1111";//     return Qt::ItemIsSelectable | Qt::ItemIsEnabled | Qt::ItemIsEditable;// }qDebug()<<"TestListModel::flags";return Qt::ItemIsSelectable | Qt::ItemIsEnabled;
}void TestListModel::modifyItemText(int row1, int row2)
{m_studentList.swapItemsAt(row1,row2);beginResetModel();endResetModel();
}void TestListModel::add()
{Student student;student.id   = 123;student.name = "love";student.sex  = "man";m_studentList.push_back(student);beginResetModel();endResetModel();emit layoutChanged();}

ui.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import TestListModel 1.0import QtQuick 2.12import QtQuick 2.2
import QtQml.Models 2.2
//import QtQuick.Controls 2.12
//QtQuick.Controls 2.12  和QtQuick.Controls.Styles 1.4不匹配
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
import QtQuick.Controls 2.12
import QtLocation 5.15
//import "CustomMenuItem.qml"
// import QtQuick.Controls 2.15//import QtQuick.Controls 2.5Window {id:window//anchors.centerIn: parentwidth: 650;height: 457visible: trueflags: Qt.FramelessWindowHint | Qt.Dialogproperty string testmsg: "GongJianBo1992"Rectangle{id:rect1;anchors.fill: parent;border.width: 1;color: "transparent";border.color: "red";clip:true//这一属性设置表示如果他的子类超出了范围,那么就剪切掉,不让他显示和起作用}//无边框移动MouseArea {id: dragRegionanchors.fill: parentproperty point clickPos: "0,0"onPressed: {clickPos = Qt.point(mouse.x,mouse.y)}onReleased: {clickPos = Qt.point(0,0)}onPositionChanged: {//鼠标偏移量var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)//如果mainwindow继承自QWidget,用setPoswindow.setX(window.x+delta.x)window.setY(window.y+delta.y)}} Menu {id: contextMenubackground: Rectangle {// @disable-check M16anchors.fill:parentimplicitWidth: 200implicitHeight: 30color: "lightblue"}Action{id:no1text:"123"onTriggered:{console.log("选项一被点击")tableView.selectAllItem()}// @disable-check M16}Menu{background: Rectangle {// @disable-check M16anchors.fill:parentimplicitWidth: 200implicitHeight: 30color: "lightblue"}title:"love"Action{id:no4text:"789"onTriggered:{console.log("选项六被点击")tableView.selectAllItem()}}}Action {id:no2text:"234"onTriggered:{console.log("选项二被点击")tableView.disselectAllItem()}}MenuSeparator {contentItem: Rectangle {// @disable-check M16implicitWidth: 200implicitHeight: 1color: "#21be2b"}}Action {id:no3text:"345"onTriggered: console.log("选项三被点击")}delegate: MenuItem {// @disable-check M16id: menuItemheight: 40// @disable-check M16contentItem: Text{// @disable-check M16text:menuItem.textcolor: menuItem.highlighted? "gary": "blue"}background: Rectangle{// @disable-check M16implicitWidth: 200implicitHeight: 30color: menuItem.highlighted? "purple":"lightblue"}arrow: Image {// @disable-check M16id: arrowImagex: parent.width - widthy: parent.height/2 -height/2visible: menuItem.subMenusource: "qrc:/Right arrow.png"}}}TestListModel{id: myModeonLayoutChanged:{console.log("LayoutChanged")}}// Page{//    x:listwidget.x//    y:listwidget.y//    width:  listwidget.width//    height: listwidget.height//    background: Rectangle{//        anchors.fill: parent//        color: "white"//        border.width: 1//        border.color: "black"//    }// }Rectangle{width:  window.width-60+2height: 300+2border.color: "lightgreen"border.width: 1color: "transparent"x:30y:40ListView {id: listwidgetwidth:  parent.width-2//window.width-60height: parent.height-2//   300x:1y:1interactive: false // @disable-check M16model: myModeclip: true  //不写的话,滚动的时候,listview会有拖拽的感觉//orientation: ListView.Vertical //垂直列表        ScrollBar.vertical: ScrollBar {id: scrollBarhoverEnabled: trueactive: hovered || pressedpolicy: ScrollBar.AlwaysOnorientation: Qt.Verticalsize: 0.8anchors.top: parent.topanchors.right: parent.rightanchors.bottom: parent.bottomcontentItem: Rectangle  {implicitWidth: 6  //没指定的时候的宽度implicitHeight: 100 //没有指定高度的时候radius: width / 2color: scrollBar.pressed ? "#81e889" : "#c2f4c6"}}Rectangle{id : dargRectwidth: 100height: 30visible: falsecolor: "lightgray";Text {anchors.verticalCenter: parent.verticalCenteranchors.horizontalCenter: parent.horizontalCenterid: dargRectText// text: "123"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}delegate: Item{id:itemDrag1width: window.width-60height: 30property int dragItemIndex: 0property bool isHover: falseRectangle {width: window.width-60height: 30//radius: 5;// border.width: 1// border.color: "white"color:isHover === true? "lightgreen":listwidget.currentIndex === index ? "lightblue" : "gray"Text {id:itemDrag2anchors.verticalCenter: parent.verticalCenteranchors.left: parent.left// text: "123"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCentertext: id+":"+name+":"+sex}                MouseArea {id: mouseAreaanchors.fill: parentacceptedButtons: Qt.LeftButton | Qt.RightButtonhoverEnabled: trueonWheel: {// @disable-check M16// 当滚轮被滚动时调用// 事件参数wheel提供了滚动的方向和距离if (wheel.angleDelta.y > 0) {//console.log("向上滚动")scrollBar.decrease();}else {//console.log("向下滚动")scrollBar.increase();}}onEntered:{isHover = true//console.log("onEntered" +isHover)}onExited:{isHover = false//console.log("onExited" +isHover)}onClicked:{if (mouse.button === Qt.RightButton)//菜单{console.log("menu RightButton")contextMenu.popup()}else{//var other_index = listwidget.indexAt(mouseArea.mouseX , mouseArea.mouseY );listwidget.currentIndex = index // 点击时设置当前索引为该项的索引值dragItemIndex = index;console.log("onClicked"+index)}}onPressAndHold:  {if(mouse.button === Qt.LeftButton){console.log("onPressAndHold"+index)listwidget.currentIndex = indexdargRect.x = mouseX +itemDrag1.xdargRect.y = mouseY+itemDrag1.ydragItemIndex = index;dargRectText.text = itemDrag2.textdargRect.visible = true}}onReleased:{if(dargRect.visible === true){dargRect.visible = falsevar other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );console.log("onReleased"+other_index)if(dragItemIndex!==other_index){var afterItem   = listwidget.itemAtIndex(other_index );// listwidget.myModel.get(other_index).textmyModel.modifyItemText(dragItemIndex,other_index)//console.log("onReleased"+myModel)}}}onPositionChanged:{//console.log("onPositionChanged111" + mouse.button)if(mouse.button === Qt.LeftButton){//console.log("onPositionChanged222")var other_index = listwidget.indexAt(mouseX +itemDrag1.x , mouseY+itemDrag1.y );listwidget.currentIndex  = other_index;dargRect.x = mouseX +itemDrag1.xdargRect.y = mouseY+itemDrag1.y}}                     }}}}}Button {id: button1x: parent.width-80y: parent.height-36width:70height:30//text: qsTr("Button")background:Rectangle // @disable-check M16{//anchors.fill: parentborder.color: "royalblue"border.width: 1color: button1.down ? "red" :(button1.hovered?"blue":"lightsteelblue")}Text {text: "1213";// anchors.fill: parentanchors.centerIn: parent;color: button1.hovered?"yellow":"red";font.pixelSize: 13;//font.weight: Font.DemiBold}       Connections {target: button1function onClicked(){window.close();}}}function myQmlFunction( msg,index) {console.log("Got message:", msg)return "some return value"}function setSignalB(name, value){console.log("setPoint"+" "+testmsg);console.log("qml function processB",name,value);myMode.add();return value}}

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/379869.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java里的引用详解

1.体验方法引用 方法引用的出现原因 在使用Lambda表达式的时候&#xff0c;我们实际上传递进去的代码就是一种解决方案&#xff1a;拿参数做操作 那么考虑一种情况&#xff1a;如果我们在Lambda中所指定的操作方案&#xff0c;已经有地方存在相同方案&#xff0c;那是否还有必要…

PHP房产中介租房卖房平台微信小程序系统源码

​&#x1f3e0;【租房卖房新选择】揭秘房产中介小程序&#xff0c;一键搞定置业大事&#xff01;&#x1f3e1; &#x1f50d;【开篇&#xff1a;告别繁琐&#xff0c;拥抱便捷】&#x1f50d; 还在为找房子跑断腿&#xff1f;为卖房发愁吗&#xff1f;今天给大家安利一个超…

JavaScript 获取 url(get)参数

https://andi.cn/page/621584.html

pytorch学习(八)Dataset加载分类数据集

我们之前用torchvision加载了pytorch的网络数据集&#xff0c;现在我们用Dataset加载自己的数据集&#xff0c;并且使用DataLoader做成训练数据集。 图像是从网上下载的&#xff0c;网址是 点这里&#xff0c;标签是图像文件夹名字。下载完成后作为自己的数据集。 1.加载自己…

PyTorch 深度学习实践-循环神经网络基础篇

视频指路 参考博客笔记 参考笔记二 文章目录 上课笔记基于RNNCell实现总代码 基于RNN实现总代码 含嵌入层的RNN网络嵌入层的作用含嵌入层的RNN网络架构总代码 其他RNN扩展基本注意力机制自注意力机制&#xff08;Self-Attention&#xff09;自注意力计算多头注意力机制&#xf…

RPC与服务的注册发现

文章目录 1. 什么是远程过程调用(RPC)?2. RPC的流程3. RPC实践4. RPC与REST的区别4.1 RPC与REST的相似之处4.2 RPC与REST的架构原则4.3 RPC与REST的主要区别 5. RPC与服务发现5.1 以zookeeper为服务注册中心5.2 以etcd为服务注册中心 6. 小结参考 1. 什么是远程过程调用(RPC)?…

TCP三次握手与四次挥手详解

1.什么是TCP TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一种面向连接的、可靠的、基于字节流的通信协议&#xff0c;属于互联网协议族&#xff08;TCP/IP&#xff09;的一部分。TCP 提供可靠的、顺序的、无差错的数据传输服务&…

win11家庭版怎么升级专业版

随着Windows 11的推出&#xff0c;许多用户享受到了全新的用户界面和功能。然而&#xff0c;Windows 11家庭版在某些高级功能上有所限制&#xff0c;例如&#xff0c;组策略管理、远程桌面连接等。为了满足更多的工作需求&#xff0c;许多用户希望将Windows 11家庭版升级到专业…

十、Java集合 ★ ✔(模块18-20)【泛型、通配符、List、Set、TreeSet、自然排序和比较器排序、Collections、可变参数、Map】

day05 泛型,数据结构,List,Set 今日目标 泛型使用 数据结构 List Set 1 泛型 1.1 泛型的介绍 ★ 泛型是一种类型参数&#xff0c;专门用来保存类型用的 最早接触泛型是在ArrayList&#xff0c;这个E就是所谓的泛型了。使用ArrayList时&#xff0c;只要给E指定某一个类型…

分布式IO系统BL201 Profinet耦合器

BL201耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;是一种模块化的分布式I/O系统。该系统由3部分组成&#xff1a;现场总线耦合器和各种类型的&#xff08;数字和模拟信号以及特殊功能&#xff09;I/O模块…

Keka for Mac v1.4.3 中文下载 解压/压缩工具

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功 三、运行测试1、打开软件2、文件访问权限修改3、访达扩展 安装完成&#xff01;&#xff…

Ubantu 使用 docker 配置 + 远程部署 + 远程开发

大家好我是苏麟 , Ubantu 一些配置 . 视频 : 服务器很贵&#xff1f;搞台虚拟机玩玩&#xff01;保姆级 Linux 远程开发教程_哔哩哔哩_bilibili Docker安装及配置 安装命令 : sudo apt install docker.io 查看版本号 : docker -v 查看虚拟机地址命令 : ifconfig 虚拟机地址 或…

【Android】 dp与sp,加冕为王

目录 重要概念 屏幕尺寸 屏幕分辨率 屏幕像素密度 基础知识&#xff1a; ppi pt DPI 的定义和重要性 Android 中的 DPI 级别 px dp&#xff08;Density Independent Pixels&#xff09; sp&#xff08;Scale-independent Pixels&#xff09; 安卓的dp/dip、sp 虚拟…

PlantUML-UML 绘图工具安装、Graphviz安装、本地使用/在线使用、语法、图示案例

文章目录 前言本地安装vscode安装插件下载安装Graphviz配置Graphviz环境变量测试 在线使用演示PlantUML语法总结活动图&#xff08;新语法&#xff09;时序图类图用例图其他图 更多相关内容可查看 前言 本篇提供两种使用方式分别为 在线使用地址1&#xff1a;https://www.pla…

【日常记录】【插件】excel.js导出的时候给单元格设置下拉选择、数据校验等

文章目录 1. 代码基本结构2. 导出的excel 某单元格的值设置为下拉选择3. 如何把下拉选择项设置为动态4. 单元格设置校验、提示5. 在WPS上的设置 1. 代码基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><…

Gitee使用教程2-克隆仓库(下载项目)并推送更新项目

一、下载 Gitee 仓库 1、点击克隆-复制代码 2、打开Git Bash 并输入复制的代码 下载好后&#xff0c;找不到文件在哪的可以输入 pwd 找到仓库路径 二、推送更新 Gitee 项目 1、打开 Git Bash 用 cd 命令进入你的仓库&#xff08;我的仓库名为book&#xff09; 2、添加文件到 …

容器化部署prometheus后再监控docker容器

一、主机部署Prometheus、cadvisor、grafana、node-exporter 1、部署cadvisor收集节点容器信息 docker run -v /:/rootfs:ro -v /var/run:/var/run/:rw -v /sys:/sys:ro -v /var/lib/docker:/var/lib/docker:ro -p 8080:8080 --detachtrue --namecadvisor google/cadvisor 2、…

在线 PDF 制作者泄露用户上传的文档

两家在线 PDF 制作者泄露了数万份用户文档&#xff0c;包括护照、驾驶执照、证书以及用户上传的其他个人信息。 我们都经历过这样的情况&#xff1a;非常匆忙&#xff0c;努力快速制作 PDF 并提交表单。许多人向在线 PDF 制作者寻求帮助&#xff0c;许多人的祈祷得到了回应。 …

PolarisMesh源码系列--Polaris-Go注册发现流程

导语 北极星是腾讯开源的一款服务治理平台&#xff0c;用来解决分布式和微服务架构中的服务管理、流量管理、配置管理、故障容错和可观测性问题。在分布式和微服务架构的治理领域&#xff0c;目前国内比较流行的还包括 Spring Cloud&#xff0c;Apache Dubbo 等。在 Kubernete…

golang开发环境搭建与踩坑记录

文章目录 一、安装下载1、go环境2、ide 二、基本使用1、运行2、结构体与方法函数指针3、闭包4、指针5、map6、接口7、异常 三、包管理1、go mod语法2、项目下载所有依赖 一、安装下载 1、go环境 下载地址&#xff1a;https://go.dev/dl/ 或者&#xff1a;https://golang.goog…