qml鼠标拖动_QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView

最新推荐文章于 2024-02-27 11:11:08 发布
最新推荐文章于 2024-02-27 11:11:08 发布
阅读量461 收藏
点赞数
文章标签： qml鼠标拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34632164/article/details/113680755
版权

ListView{

id:thelist

property bool isClicked:false //初始化没有点击事件

anchors.fill: parent

clip:trueinteractive:!isClicked

focus:trueflickableDirection: Flickable.VerticalFlick

boundsBehavior: Flickable.StopAtBounds

ScrollBar.vertical: ScrollBar {id:scrollBar;active:true;}

Keys.onUpPressed: scrollBar.decrease()

Keys.onDownPressed: scrollBar.increase()

move:Transition {

NumberAnimation{

properties:"x,y";

duration:300}

}

anchors {

left: parent.left; top: parent.top; right: parent.right;

margins:2}

spacing:4cacheBuffer:50

//model: anAirModel

model: ListModel{

id:sstpModel;

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高 ALT-高度

status:"TAI"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//departureTime 起飞时间 离港时间

arrivalTime:"1423"//arrivalTime到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//takeOffRunway 起飞跑道

landingRunway:"xx"//landingRunway 降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"HANDOVER"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"CLR"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"OFF"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"DESCENT"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"DISENGAGE"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

ListElement{

air_iden:"CES5401"//呼号 航班号

type:"A319"//机型

el:"07056"//机场标高

status:"TAI"//管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离

etd:"1215"//预计离港时间

eta:"1413"//预计到达时间

departureTime:"1215"//起飞时间 离港时间

arrivalTime:"1423"//到达时间 到港时间

ades:"ZSPD"//到达机场 目的地

takeOffRunway:"xx"//起飞跑道

landingRunway:"xx"//降落跑道

procedure:"xxx"//进离场程序

//tas:"K0860"//巡航速度 860km/h

//waypoint1:"TEBUN";//航路点

//assr:"6255"//应答机编码

//cvsm:"S0820"//对应高度层 82km

}

}

delegate:Rectangle{

id:sstpDelegate

propertyint fromIndex:0propertyint toIndex:0width: parent.width

height:80MouseArea {

id:mousearea

anchors.fill: parent

onClicked: {

thelist.currentIndex=index

}

onPressed: {

thelist.currentIndex=index

sstpDelegate.fromIndex=index

thelist.isClicked= true //每项按钮点击就true

}

onReleased: {

thelist.isClicked= false //每项按钮点击就false

console.log("fromIndex:",sstpDelegate.fromIndex,"toIndex:",sstpDelegate.toIndex)

}

onPositionChanged: {var lastIndex = thelist.indexAt(mousearea.mouseX + sstpDelegate.x,mousearea.mouseY +sstpDelegate.y);if ((lastIndex < 0) || (lastIndex >sstpModel.rowCount()))return;if (index !==lastIndex){

sstpModel.move(index, lastIndex,1);

}

sstpDelegate.toIndex=lastIndex;

}

}

Row{

Rectangle{

id:curRect

width:5height: sstpDelegate.height

color: index===thelist.currentIndex ? Global.GlobalVar.sstpCurIndex : Global.GlobalVar.mainFontColor//选中颜色设置

}

Rectangle{//info

id:infoRect

width: sstpDelegate.width- controlRect.width - 5height: sstpDelegate.height

RowLayout{

spacing: Global.GlobalVar.space*4anchors.left: parent.left

anchors.leftMargin: Global.GlobalVar.space

ColumnLayout{

spacing: Global.GlobalVar.space

MyText{//航班呼号

text: air_iden

fontColor: b1

fontSize: xl

}

TextInput{//预计起飞时间

text: etd

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

TextInput{//起飞时间

text: departureTime

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

}

ColumnLayout{

spacing: Global.GlobalVar.space

MyText{//飞行机型

text: type

fontColor: b1

fontSize: m

}

TextInput{//预计到达时间

text: eta

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

TextInput{//到达时间

text: arrivalTime

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

}

ColumnLayout{

spacing: Global.GlobalVar.space*4MyText{//机场标高

text: el

fontColor: b1

fontSize: m

}

TextInput{//目的机场

text: ades

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

}

ColumnLayout{

spacing: Global.GlobalVar.space*4TextInput{//起飞跑道

text: takeOffRunway

color: Global.GlobalVar.mainFontColor

font.pointSize:12}

TextInput{//进离场程序

text: procedure

color: Global.GlobalVar.mainFontColor

font.pointSize:12onEditingFinished: {

}

}

}

TextInput{//降落跑道

anchors.top: parent.top

text: takeOffRunway

color: Global.GlobalVar.mainFontColor

font.pointSize:12}

}

}

RecLine{id:recLine;direction:false}

Rectangle{

id:controlRect

width:100height: sstpDelegate.height

ColumnLayout{

anchors.horizontalCenter: parent.horizontalCenter

anchors.verticalCenter: parent.verticalCenter

BorderButton{

implicitWidth:80implicitHeight:30borderbtnText: status

fontSize:10MouseArea{

anchors.fill: parent

}

}

MyText{

anchors.horizontalCenter: parent.horizontalCenter

font.family:"FontAwesome"text:'\uf014'fontSize: xl

MouseArea{

anchors.fill: parent

onClicked: an_del.open()

}

}

}

}

}

}

IsDelDialog{id:an_del;x:SSTPWind.width/2;y:SSTPWind.height/2;}

Connections{

target: an_del.del_area;

onClicked:{//anAirModel.remove(thelist.currentIndex)

sstpModel.remove(thelist.currentIndex)

an_del.close()

}

}

}

弗兰克乙醚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
74.qt quick-水平ListView拖拽选中换行、添加、删除、移动动画V2
抵抗时间扭曲，坚持做一件有意义的事
03-08 1090
委托采用共享model数据,之前版本是实现两个委托,导致每次model一更新都要更新两边显示。替换时,新增z级更新,避免move动画效果差。增加拖拽到边缘时,开启滚动动画效果。
TreeView.rar_qml_qml 列表_qml 实现原理_qt 树形多猎_ricerwf
07-15
简单实现Qt 基于qml的树状列表功能，方便用户去了解树状结构实现机制及原理
42.qt quick-ListView拖拽选中换行、添加、删除、移动动画
抵抗时间扭曲，坚持做一件有意义的事
09-10 2045
最近有个朋友让我帮他实现一个QMLListView拖动效果: 所以果断安排,效果如下所示: 实现的功能如下所示: 支持add动画、移除动画、移动动画 按下移动则实现拖拽、点击则实现选中效果 拖拽的时候,则显示要替换行的高亮位置 源码已放置专栏付费资源群中.文章尾部会提供群号 1.demo项目介绍 整个文件结构如下所示: 2.源码介绍 mian.qml是整个项目的入口,所以我们需要尽量的精简,把逻辑放在其它组件里面封装.避免项目冗余度过高. main.qml如下所示:...
【QML】TableView 、Flickable添加滚动条
最新发布
-凌凌漆-的博客
02-27 382
【代码】【QML】TableView 、Flickable添加滚动条。
Qml-跨窗口拖动图片、物体
qq_41286751的博客
07-20 1128
跨窗口，鼠标id仍然是蒙层的id，这样一样会被遮挡。最后发现，当我们按下的时候，可以手动设置蒙层的mouseArea的大小区域，使得不被干扰，当释放的时候，又可以设置他的区域，甚至乎设置为0....
Qml 拖拽例子
xiaoheliushuiya
01-22 402
完整代码在我的开源项目中：https://gitlab.com/qt-technology/qml 工程目录路径为drag_drop/listview 运行时执行./run.sh文件即可。 需要安装最新的Qt 5.2 for Linxu 64版本，注意修改一下run.sh中的Qt安装路径。 首先，一般的Listview实现的拖拽不能满足我的一下要求： 1. 被拖拽的item不能离开原来的位置，拖...
QML ListView实现TabBar标签拖拽移动位置效果
11-25
QML中TabBar要实现标签移动效果比较麻烦，不像QTabBar控件那样可以设置属性后就能移动，虽然在父类Container中提供了moveItem接口，但是要实现拖拽交换的视觉效果还是没那么容易。本demo使用QML的ListView来实现该...
QML CPlusePluse 2.zip_opencv qml_qml_qml opencv_qml加入OpenCV库_qml
07-15
OpenCv QML C++ 的混合编程，实现图处理等功能
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
QT/QML 的日历控件，纯QML实现。
《QmlBook》_QT5_中文版_qt5qml_qml_教程_
09-29
使用QML编写界面的教程，非常使用的教程
QML实现listview用Drag的方式实现拖拽交换item位置
wjc1231313的博客
09-12 473
【代码】QML实现listview用Drag的方式实现拖拽交换item位置。
qml-关于Flow布局不能拖动(滚动)的解决办法
godaa的博客
03-31 1507
概述 最近在做一个小demo，想利用Flow流式布局的效果，即存在于布局中的每行的组件都会根据窗口大小的变化而数量自适应变化。 问题 问题来了，当组件很多的时候，也就是当组件数量超出窗口大小时，不能滚动或是拖动看到更多的组件，理论上Flow布局本身是不能够拖动的，也就不能设置滚动条。 解决方案 关于解决方案，我们先了解一下另一个组件Flickable。 Flickable 简介：Flickable 项将其子项放置在可以拖动和轻弹的表面上，从而使子项上的视图滚动。 此行为构成了旨在显示大量子项（如 ListV
QML拖拽GridView元素重新排序示例
弓人水的技术分享
12-16 836
import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 1024 height: 480 title: qsTr("Drag Icon") property ListModel dataModel: ListModel { ListElement { title: qsTr("电话") } ListElement { title: qsTr
qml鼠标拖动_Arcgis for qml - 鼠标拖拽移动
weixin_33046983的博客
01-17 495
以实现鼠标拖拽文本图层为例目的是利用鼠标进行拖拽。实现两种模式，一种是屏幕上的拖拽，第二种是地图上图层的挪动。屏幕上的拖拽其实跟ArcGIS没有联系，用qml就能写，但是地图图层上的挪动，就需要考虑到ArcGIS 图层的问题了。鼠标拖拽都跟鼠标事件有关联，MouseEvent中的Drag()事件和onMousePressedAndHeld()以及onMouseReleased()事件。1.屏幕上的...
Qt基于Qml列表项拖放操作示例
11-02 423
主要通过处理鼠标Y坐标信号来实现。
qml自定义菜单栏实现自由拖动
chenyijun的专栏
10-02 852
在使用qml开发过程中，有时候我们需要自己定制菜单栏并且也能自由拖动，本篇介绍qml定制菜单栏实现自由拖动。
Qt--实现拖拽文件
hw5230的博客
06-12 719
实现文件拖拽到窗体主要是重写：//文件拖拽到窗体内，触发//文件拖拽到窗体内，释放，触发。
Qt-quick(qml)实现窗口和物体的拖动
qq_36685813的博客
10-06 1037
Qt-quick(qml)实现窗口和物体的拖动 *在实现窗口的拖动时，是在去掉窗口标题栏情况下完成的，当有窗口标题栏后无法展示窗口拖动效果。* 代码实现如下： import QtQuick 2.9 import QtQuick.Window 2.2 Window { id: mainWindow visible: true width: 900 height: 600 ...
QML 拖拽文件DropArea的使用
lys211的专栏
05-26 4501
- QML - 拖拽文件DropArea的使用 代码简简单单就这么点 ApplicationWindow { title: qsTr("Hello World"); width: 640; height: 480; visible: true; Item{ anchors.fill: paren
QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView
06-09
实现可拖拽、编辑、选中的ListView可以提升用户交互体验，下面介绍一种实现方法。 1. 定义ListView 首先，我们需要定义一个ListView，用于显示列表项。在ListView中，我们需要指定model、delegate、highlight、onPressed、onPositionChanged等属性。 ``` ListView { id: listView model: ListModel { id: listModel } delegate: Component { id: delegate Rectangle { id: item width: listView.width height: 50 color: "white" border.width: 1 border.color: "black" Text { id: text anchors.centerIn: parent text: model.text } MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } } Rectangle { id: indicator width: 10 height: 10 color: "green" radius: width / 2 visible: listView.currentIndex === index anchors { right: parent.right verticalCenter: parent.verticalCenter margins: 10 } } } } highlight: Rectangle { color: "lightgray" width: listView.width height: 50 border.width: 1 border.color: "black" } onPositionChanged: { if (listView.moving) return; var index = listView.indexAt(listView.contentItem.x, listView.contentItem.y) if (index !== -1 && index !== listView.currentIndex) { listView.currentIndex = index } } } ``` 在上面的代码中，ListView中的delegate定义了每个列表项的展示方式。我们在delegate中定义了一个MouseArea，用于实现可拖拽的功能。在MouseArea的drag.target属性中，我们指定了可拖拽的目标为列表项item。设置drag.axis为Drag.XAxis，表示只能在水平方向上拖拽。设置drag.minimumX为-listView.width，drag.maximumX为listView.width，表示只能在ListView的宽度范围内拖拽。在onPressed事件中，我们设置了当前列表项为选中状态，并将其居中展示。 2. 定义编辑界面 为了实现编辑功能，我们需要定义一个编辑界面。在编辑界面中，用户可以修改列表项的文本内容。我们可以使用一个Dialog来实现编辑界面。 ``` Dialog { id: editDialog title: "Edit Item" modal: true width: 400 height: 200 visible: false TextField { id: textField anchors.centerIn: parent width: parent.width - 40 placeholderText: "Enter item text" } Button { text: "OK" onClicked: { var index = listView.currentIndex if (index !== -1) { listModel.setProperty(index, "text", textField.text) } editDialog.close() } enabled: textField.text !== "" anchors { right: parent.right bottom: parent.bottom margins: 10 } } Button { text: "Cancel" onClicked: editDialog.close() anchors { left: parent.left bottom: parent.bottom margins: 10 } } } ``` 在上面的代码中，我们定义了一个Dialog，其中包含一个TextField和两个Button。用户可以在TextField中输入新的文本内容，然后点击OK按钮保存修改，或点击Cancel按钮取消修改。 3. 实现选中效果 为了让用户能够明显地看到当前选中的列表项，我们可以在每个列表项上添加一个指示器。在ListView的delegate中，我们定义了一个Rectangle，用于显示当前选中的列表项。在Rectangle的visible属性中，我们使用listView.currentIndex === index来判断当前列表项是否被选中。 4. 实现编辑功能 在ListView中，我们可以通过双击或长按来触发编辑功能。在ListView的delegate中，我们为item和mouseArea分别定义了onDoubleClicked和onLongPressed事件。在onDoubleClicked事件中，我们弹出编辑界面，让用户可以修改当前选中的列表项的文本内容。在onLongPressed事件中，我们弹出上下文菜单，让用户可以选择删除当前选中的列表项。 ``` MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } onDoubleClicked: { editDialog.visible = true textField.text = model.text textField.selectAll() } onLongPressed: { var menu = Menu { MenuItem { text: "Delete" onTriggered: listModel.remove(index) } } menu.popup() } } ``` 在上面的代码中，我们为mouseArea分别定义了onDoubleClicked和onLongPressed事件。在onDoubleClicked事件中，我们弹出编辑界面editDialog，并将当前选中的列表项的文本内容显示在TextField中。在onLongPressed事件中，我们弹出上下文菜单Menu，其中包含一个MenuItem，用于删除当前选中的列表项。 5. 实现拖拽功能 在ListView中，我们可以通过拖拽来调整列表项的顺序。在ListView的delegate中，我们为item定义了onDropped事件。在onDropped事件中，我们交换拖拽的两个列表项的位置。 ``` Rectangle { id: item width: listView.width height: 50 color: "white" border.width: 1 border.color: "black" Text { id: text anchors.centerIn: parent text: model.text } MouseArea { id: mouseArea anchors.fill: parent drag.target: item drag.axis: Drag.XAxis drag.minimumX: -listView.width drag.maximumX: listView.width drag.active: listView.currentIndex === index onPressed: { listView.currentIndex = index listView.positionViewAtIndex(index, ListView.Center) } onDropped: { if (drag.source !== drag.target) { var fromIndex = drag.source.index var toIndex = drag.target.index listModel.move(fromIndex, toIndex, 1) } } } Rectangle { id: indicator width: 10 height: 10 color: "green" radius: width / 2 visible: listView.currentIndex === index anchors { right: parent.right verticalCenter: parent.verticalCenter margins: 10 } } } ``` 在上面的代码中，我们为mouseArea定义了onDropped事件。在onDropped事件中，我们使用ListModel的move方法来交换拖拽的两个列表项的位置。 至此，我们已经实现了可拖拽、编辑、选中的ListView。这个ListView可以让用户方便地调整列表项的顺序，同时也可以让用户快速修改列表项的文本内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值