42.qt quick-ListView拖拽选中换行、添加、删除、移动动画

已于 2022-02-25 16:25:08 修改
阅读量2.3k 收藏 5
点赞数 4
分类专栏： Qt Quick/QML入门到精通 文章标签： qt 动画 html5
于 2021-09-10 11:35:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37997682/article/details/120218022
版权
本文介绍了如何使用QML实现一个ListView的拖动效果，包括添加、删除、移动动画和选中效果。内容涵盖按下拖拽、点击选中以及拖拽时的高亮显示。源码已分享至相关社群供下载学习。
摘要由CSDN通过智能技术生成

最近有个朋友让我帮他实现一个QML ListView拖动效果,所以果断安排,效果如下所示:

实现的功能如下所示:

  • 支持add动画、移除动画、移动动画
  • 按下移动则实现拖拽、点击则实现选中效果
  • 拖拽的时候,则显示要替换行的高亮位置

源码已上传至专栏群(第一章底部获取)中,感兴趣的自行下载、
入群需验证订阅用户名,尽量选择"订阅专栏"、"学习会员"会验证失败、

1.demo项目介绍

整个文件结构如下所示:

 2.源码介绍

mian.qml是整个项目的入口,所以我们需要尽量的精简,把逻辑放在其它组件里面封装.避免项目冗余度过高.

main.qml如下所示:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.La
了解本专栏 订阅专栏 解锁全文
诺谦
关注
专栏目录
订阅专栏
74.qt quick-水平ListView拖拽选中换行、添加、删除、移动动画V2
抵抗时间扭曲，坚持做一件有意义的事
03-08 1382
委托采用共享model数据,之前版本是实现两个委托,导致每次model一更新都要更新两边显示。替换时,新增z级更新,避免move动画效果差。增加拖拽到边缘时,开启滚动动画效果。
QML实现ListView的拖动排序
草上爬的博客
11-11 7200
现有一种需求，就是用鼠标拖动某项，动态去改变某一项在ListView中显示的顺序位置，经过研究及实践实战，实现方式的核心代码如下： import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Window 2.2 import QtQuick.Dialogs 1.2 Rectangle { width: 800 ...
QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView
sueRimn的博客
01-10 1093
QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView 鼠标单击可选中当前项，头部呈绿色显示；按压当前项可进行拖拽更换列表项位置；点击数据可以进行编辑； GitHub:八至 作者：狐狸家的鱼     这里是自己定义的model，有些字体和颜色都是使用的全局属性， ListView{ id:thelist property bool is...
QML ListView 鼠标拖拽交换行
龚建波
11-16 2601
QML 的 ListView 本身有 move 过渡（Transition）属性，可以用来做一些交换动画效果。其中 move 为当前项的过渡，moveDisplaced 为被交换项的过渡。鼠标拖拽可以用一个 MouseArea 来实现，当鼠标滑动到相邻行后就调用 model 的 move 接口，这样就会触发 view 的 move 过渡动画。效果如下： 感觉有点生硬，勉强能用。 完整代码如下： import QtQuick 2.12 import QtQuick.Window 2.12 //演
Qml列表项拖放
zhengtianzuo的博客
11-25 1407
ListModel的move(int from, int to, int n) 可以将列表项进行移动 根据鼠标的拖动位置, 可以判断出需要移动项的序号 var lastIndex = listview.indexAt(mousearea.mouseX + listItem.x,
Qt Quick中的ListView
瞎捣鼓
04-22 3099
Qt Quick中的ListView初学ListView 3要素: model : 负责每一个行的 数据 delegate:负责每一个行的 外观 3.与外界如何交互,删除和添加数据(通过model和js) 通过JavaScript控制边线,0，2，4，6…..才显示边框,用来显示每一行的界限,界限颜色用Qt自带的函数就可以了 JavaScript代码: Myhelp.js .pragma l
listview qt 选中内容_qt-listview用法
weixin_39986027的博客
12-19 868
QListView類別提供樹狀的列示元件，可以顯示多欄與樹狀結構，它常與QListViewItem或者是QCheclListItem一同使用；使用QListView最簡單的方式，就是以QListView作為樹根，並使用addColumn()方法加入欄位，然後使用QListViewItem或QCheckListItem指定這個QListView作父節點，例如：QListView *root;root...
Qt Quick 中的 ListView 在实际开发中被广泛使用，其中涉及到的拖拽选中换行、添加、删除、移动等操作是非常常见的。今天我将为大家分享如何实现这些操...
.
04-11 409
在上述代码中，我们定义了一个拖拽区域，并使用 drag.target 属性指定拖拽目标。我们还使用了 drag.axis 属性来限制只能在 X 轴上进行拖拽操作，并使用 drag.minimumX 和 drag.maximumX 属性限制了拖拽范围。Qt Quick 中的 ListView 在实际开发中被广泛使用，其中涉及到的拖拽选中换行、添加、删除、移动等操作是非常常见的。接着，我们可以添加一些动画效果，让 ListView 在拖拽、添加、删除、移动时更具生动性。
73.qt quick-通用可拖拽表盘示例(支持渐变)
抵抗时间扭曲，坚持做一件有意义的事
12-28 1491
【代码】73.qt quick-通用可拖拽表盘示例。
QML ListView实现TabBar标签拖拽移动位置效果
11-25
QML中TabBar要实现标签移动效果比较麻烦，不像QTabBar控件那样可以设置属性后就能移动，虽然在父类Container中提供...demo提供了动态添加页、删除页、移动交换标签位置功能。详情见：https://blog.csdn.net/luoyayun361
Qt Quick之ListView单元的上下拖动功能实现
tong5956的专栏
08-09 2312
最近在项目中用到了ListView中单元的上下拖动功能，由于在网上找这方面的资料不是太多，所以这里将实现方法记录下来。实现方法：使用onMouseXChanged、onMouseYChanged两个函数来得到该区域内x,y变化后的坐标值，并在里面通过listview.indexAt()函数计算得到索引值index，最后使用move函数来移动listview显示单元。这里提供了一个简单的listvi
拖拽之路（一）：自定义QListWidget实现美观的拖拽样式（拖拽即选中）
weixin_43742643的博客
09-03 4343
QListWidget实现自定义拖拽（拖拽即选中），让你摆脱传统难看的拖拽样式！含效果图。
QML实现listview用Drag的方式实现拖拽交换item位置
最新发布
wjc1231313的博客
09-12 813
【代码】QML实现listview用Drag的方式实现拖拽交换item位置。
QML中鼠标拖动移动ListView中项的位置
Shado_walker的专栏
08-31 3621
在QML开发中，ListView是我们经常用到的控件，可以用它给用户展示出列表，但是往往都是将项目的显示顺序排好后，直接让ListView显示出来，亦或者是知道要移动到具体的那一位置，然后调整数据在ListView中的顺序来达到要求，现有一种需求，就是用鼠标拖动某项，动态去改变某一项在ListView中显示的顺序位置，经过研究及实践实战，实现方式的核心代码如下： import QtQuick 2
可拖拽listview基本使用技巧（DragSortListView）
热门推荐
forrey的专栏
11-21 3万+
有段时间没写博客了。（额。。。。。四年左右吧）。文笔有些生疏，我尽量把用法和关键点讲清楚。        可拖拽的listview，DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的 item上下拖拽效果以便达到美化界面的作用。       先来看三张效果图。
Listview拖动节点交换数据、增删改除
逝忆
04-01 264
Listview拖动节点交换数据、增删改除，挺实用的 import QtQuick 2.12 import QtQuick.Window 2.2 import QtQuick.Controls 2.4 import QtQuick.Layouts 1.11 Window{ id:topwindow width: 800 height:800 flags: Qt.W...
Qt Quick之多个ListView控件间相互拖动及其拖动效果实现
tong5956的专栏
08-09 3368
一篇中，实现了单个ListView内部单元的相互拖动及拖动效果，本篇则在上一篇基础上增加了一些复杂性，增加了两个ListView控件之间单元的相互拖动，并在拖动时显示拖动单元的具体内容。        实现方法 ：拖动方法使用上一篇的同样的方法，只是在超过控件范围（如右边Listview控件的最左边），则会做出：将右侧Listview控件正在拖动的单元append添加到左侧ListView控件，
qml drag listview
chenyijun的专栏
03-28 1337
http://stackoverflow.com/questions/26045587/using-drag-and-drop-with-listview-to-create-an-inventory-ui
【QML Model-View】ListView-增删改查（二）
m0_60259116的博客
03-04 1312
【QML Model-View】ListView-增删改查（二）
qml中如何使listview生成的表格无法移动
07-14
在 QML 中，要使 `ListView` 生成的表格无法移动，你可以通过设置 `ListView` 的 `interactive` 属性为 `false` 来禁用用户的交互操作。这将阻止用户滚动、拖动和选择列表项。 下面是一个示例代码： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 400 height: 400 ListView { width: parent.width height: parent.height interactive: false // 禁用交互操作 model: ListModel { ListElement { text: "Item 1" } ListElement { text: "Item 2" } ListElement { text: "Item 3" } // ... } delegate: Item { width: ListView.view.width / 3 height: ListView.view.height / model.count Text { text: modelData.text anchors.centerIn: parent } } } } ``` 在这个示例中，`ListView` 的 `interactive` 属性被设置为 `false`，这样用户将无法滚动、拖动或选择列表项。你可以根据需要修改 `ListView` 的宽度、高度以及列表项的样式。 请注意，这只是一种方法来实现禁用列表的移动功能。如果你希望在特定情况下启用或禁用移动功能，你可以在代码中根据条件来动态地设置 `interactive` 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诺谦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值