完整代码在我的开源项目中:https://gitlab.com/qt-technology/qml
工程目录路径为drag_drop/listview
运行时执行./run.sh文件即可。
需要安装最新的Qt 5.2 for Linxu 64版本,注意修改一下run.sh中的Qt安装路径。
首先,一般的Listview实现的拖拽不能满足我的一下要求:
1. 被拖拽的item不能离开原来的位置,拖拽应该动态产生一个副本随着鼠标移动
2. 拖拽过程中需要显示不同的icon
我的代码来自于qt example目录下的declarative里面的工程,不过做了较大改动。先来看一下效果图,运行run.sh后,会看到:
鼠标拖动太阳,星星和树木的图标向右移动,会刊到光标位置出现了月亮的图标。
鼠标放开后,月亮消失。程序中包含了可重复使用的拖拽组件。包括:
dragVessel.qml => 外部qml文件都使用它,这是拖拽组件的容器,里面总是包含一个dragItem文件的路径
dragItem.qml => 被拖拽的item,总是由drag.js负责动态创建
drag.js => JavaScript代码,负责处理三个拖拽事件
调用代码可以参考test.qml文件,里面的核心是:
Component {
id: contactDelegate
Item {
width: 180; height: 40
anchors.left: parent.left
anchors.leftMargin: 10
Rectangle {
id: tile
anchors.topMargin: 10
color: "lightsteelblue"
radius: 5
width: 180;
height: 40
DragVessel {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
dragQmlFile: "dragItem.qml"
image: icon
dragImage: "images/moon.png"
parentItem: r1
}
Text {
text: name
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
}
}
}
}
ListView {
anchors.fill: parent
header: inputHeader
model: ContactModel {}
delegate: contactDelegate
spacing: 4
focus: true
interactive: false
}
ListView依赖ContactModel.qml提供数据,包括图片路径,注意关闭interactive,它会干扰拖拽。
Component用到了DragVessel,并正确设置了必须的属性。
如果不明白如何动态创建Qml对象,参考前文:通过JavaScript创建Qml对象
如果想了解ListView,参考前文:从另一个qml文件中读取数据并显示在ListView中
想了解如何在qml文件中导入JavaScript文件,参考前文:Qml 和外部js文件协同工作
特别注意,父窗口对象直接关系到能不能拖动到目标区域,如果没有将目标区域设置成父窗口,则拖动出当前父窗口范围外后,都会移动到其他区域的下方,无论z 属性设置成多大。
分享到:
相关推荐
本文件是通过QML实现的自由拖拽一个区域的图片的功能,需要的盆友可以自己下载,也可以参考我的博客。
个人用qt5写的基于qml的小玩意,里面还有我相片,这个值得一看,哈(运行时可能需要qt5的类库)
适合初学者的简单QML应用
自己写的qml学习测试文件. 关于QML的内置元素。
Qt 5.7 qml图片旋转拖动鼠标点击变化
QML加载使用例子,保证例子可以运行,简单一分足以;QML优点就是可以设计复杂的页面显示,动态等效果比较的不错。
本QML小例实现从JS中导入函数,实现阶乘的简易例子,用于爱好QML的初学者学习与交流...!
自学QML边学边做了一个小例子,希望对大家学习有帮助!
网上找的两个QML和c++库相互调用的例子,使用环境是QT5.4
在Qt5.5之前是没有树控件的,我们在使用时用的是ListView来构造出一个树,Qt5.5之后的QML开发阶段,有了树控件TreeView,本篇着重记录QML的TreeView的使用(包括增加树节点和删除节点)。
QML 无边框 透明 可以拖动的 窗口的 demo。是我自己写的demo。C++交互
Qt Qml 可拖动设置Rectangle大小Demo
模仿360的QML 制作的例子 很多值得学习的地方,非常适合想要学习QML的
关于QML 的样式定义,包括背景颜色,选中颜色,节点前图片,可展开节点的图片。最最重要的节点可拖动
QML中TabBar要实现标签移动效果比较麻烦,不像QTabBar控件那样可以设置属性后就能移动,虽然在父类Container中提供了moveItem接口,但是要实现拖拽交换的视觉效果还是没那么容易。本demo使用QML的ListView来实现该...
1. 把Qt C++中的对象或类型暴露给 QML端,供QML端使用。(官方说法是“嵌入”而非“暴露”,比较文明。- -b) 2. QML中的Signal Handler(相当于Qt C++发送信号给QML端,QML端的Signal Handler进行处理)。 3. 在Qt ...
继续在Qt Widget的基础上,实现QML无边框可拖动以及拉伸等功能,如果有不理解或者运行错误,请留言,会及时进行解答,目前依然在5.4中编译完成
本例用于QML学习,仅作参考 实现了简易计算器四则运行的功能 其中包括用递归法实现有花括号、综括号、小括号的表达式计算 所有的逻辑处理部分用JS脚本实现 界面部分用到了自定义组件,布局,自定义消息等。。 本例在...
Qml批量拾起和拖动对象,类似windows桌面批量操作
QML弹出窗口组件,灯箱效果、动画效果,可拖拽 核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透,动画效果 http://www.cnblogs.com/surfsky/p/3998391.html