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

最新推荐文章于 2024-06-18 01:15:30 发布
最新推荐文章于 2024-06-18 01:15:30 发布
阅读量490 收藏
点赞数
文章标签： qml鼠标拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34632164/article/details/113680755
版权
ListView{id:thelistproperty bool isClicked:false //初始化没有点击事件anchors.fill: parentclip:trueinteractive:!isClickedfocus:trueflickableDirection: Flickable.VerticalFlickboundsBehavior: Flickable.StopAtBoun...
摘要由CSDN通过智能技术生成

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:"

最低0.47元/天 解锁文章
弗兰克乙醚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QML ListView实现TabBar标签拖拽移动位置效果
11-25
QML中TabBar要实现标签移动效果比较麻烦，不像QTabBar控件那样可以设置属性后就能移动，虽然在父类Container中提供了moveItem接口，但是要实现拖拽交换的视觉效果还是没那么容易。本demo使用QML的ListView来实现该...
TreeView.rar_qml_qml 列表_qml 实现原理_qt 树形多猎_ricerwf
07-15
简单实现Qt 基于qml的树状列表功能，方便用户去了解树状结构实现机制及原理
Qml-跨窗口拖动图片、物体
qq_41286751的博客
07-20 1201
跨窗口，鼠标id仍然是蒙层的id，这样一样会被遮挡。最后发现，当我们按下的时候，可以手动设置蒙层的mouseArea的大小区域，使得不被干扰，当释放的时候，又可以设置他的区域，甚至乎设置为0....
Qt--实现拖拽文件
hw5230的博客
06-12 860
实现文件拖拽到窗体主要是重写：//文件拖拽到窗体内，触发//文件拖拽到窗体内，释放，触发。
Flickable
最新发布
m0_46376834的博客
06-18 381
定义了一个大小为 200x200 的可滚动区域，内容区域的宽度和高度分别为 400。是 QML 中用于实现可滚动内容的组件，用户可以通过触摸或鼠标进行拖动来滚动内容。，可以实现在 QML 中显示大量内容并允许用户滚动查看。区域内拖动来查看超出可视区域的内容。
QML ListView 鼠标拖拽交换行
龚建波
11-16 2374
QML 的 ListView 本身有 move 过渡（Transition）属性，可以用来做一些交换动画效果。其中 move 为当前项的过渡，moveDisplaced 为被交换项的过渡。鼠标拖拽可以用一个 MouseArea 来实现，当鼠标滑动到相邻行后就调用 model 的 move 接口，这样就会触发 view 的 move 过渡动画。效果如下： 感觉有点生硬，勉强能用。 完整代码如下： import QtQuick 2.12 import QtQuick.Window 2.12 //演
QMl-鼠标拖动控件移动
m0_59173154的博客
10-08 910
QML鼠标拖动控件移动的简单实现
Qt-Qml-Calendar_qml_QT_qml日历控件_calendar_
10-04
通过研究这些文件，开发者可以学习到如何创建自定义的QML日历控件，包括但不限于日期选择、事件处理、样式定制以及与其他QML组件的交互。这种控件在日程管理、计划应用或者任何需要日期选择的场景中都极具实用性。 ...
qml.zip_qml_qt qml_备忘录
09-19
【qml.zip_qml_qt qml_备忘录】是一个基于Qt QML技术开发的备忘录应用。QML是Qt框架的一部分，专门用于构建用户界面，它是一种声明式语言，使得UI设计变得直观且高效。这个备忘录应用的设计理念是模仿公告栏，为用户...
《QmlBook》_QT5_中文版_qt5qml_qml_教程_
09-29
《QmlBook》_QT5_中文版是针对Qt5框架中的QML技术编写的一本教程，主要聚焦于使用QML进行用户界面设计和开发。QML，全称Quick Markup Language，是Qt的一个重要组成部分，它允许开发者用声明式语言来创建富图形用户...
QML Flickable 元素基本介绍
热门推荐
qyvlik的专栏
10-12 1万+
注意：由于一个实现的细节，放置在Flickable里面的项不能用id来anchor，而用parent代替。
QML Flickable 在鼠标位置处放大缩小
zjgo007的专栏
09-23 1088
使用Flickable显示图片、自绘内容或者其他窗口控件时，需要对其内容进行放大缩小时，使用MouseArea修改Flickable的contentWidth即可，但此时缩放后的显示位置有偏移，解决方法为移动缩放内容位置，
qml利用Flickable在鼠标处缩放图片大小，并拖拽图片上下左右移动
qq_23604781的博客
09-12 462
qml利用Flickable在鼠标处缩放图片大小，并拖拽图片上下左右移动
qml drag listview
chenyijun的专栏
03-28 1308
http://stackoverflow.com/questions/26045587/using-drag-and-drop-with-listview-to-create-an-inventory-ui
QML ListView组件解析
qq_34999565的博客
08-07 2021
QT QML组件介绍
QML类型：GridView
友善啊，朋友的博客
10-14 4700
一、描述 GridView 继承自 Flickable。用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。 二、使用示例 import QtQuick 2.12 import QtQuick.Window 2.0 Window { id:root; visible: true; width: 200; height: 200 Li
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、付费专栏及课程。

余额充值