如何在QML中的ListView之外拖动一个项目 [英] How to drag an item outside a ListView in QML
问题描述
所以，我想尝试以下：
- 创建一个与ListView重叠的mousearea
- 通过调用createComponent（）/ createObject（）**
- 将此对象重命名为mousearea
- 处理mousearea中的鼠标事件，直到
这个解决方案对我来说有点复杂，所以你有更好的方法来实现这一点吗？
一个坏主意太复杂了。我想我有办法实现这一点：
- ListView的每个代表都有一个可以拖动的隐藏项，
- 因为我的ListView是一个可重用的组件，我使用一个属性传递一个更高的项目（这里的一个Rectangle，而不是一个** MouseArea **），可以用作被拖动项目的父项
- 较高的项目包含两个ListView（或许将来可能更多），
- 当拖动开始时，该项目设置为可见并重新使用a **状态**
所以，我错过了设置父母应该解决我的问题的点。
下一个代码只是一个想法，但关键是在 ListView ，所以用户可以拖动项目并将它们放到一个 DropArea 属于第二个 ListView 。
在这个例子中， model 非常简单，只是一个数。当项目被删除时，它从第一个 ListView 中删除：
listView .model.remove（listView.dragItemIndex）
只需删除该行代码即可复制该项，而不是删除。
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
窗口{
visible：true
width：600
height：600
Rectangle {
id：root
width：400
height：400
ListView {
id：listView
width：parent.width / 2
height：parent.height
属性int dragItemIndex：-1
模型：ListModel {
Component.onCompleted：{
for（var i = 0 ; i <10; ++ i）{
append（{value：i}）;
}
}
}
委托：项目{
id：delegateItem
width：listView.width
height：50
矩形{
id：dragRect
width：listView.width
height：50
anchors.horizontalCenter：parent.horizontalCenter
anchors。 verticalCenter：parent.verticalCenter
颜色：salmon
border.color：Qt.darker（color）
文本{
anchors.centerIn：parent
文本：modelData
}
MouseArea {
id：mouseArea
anchors.fill：parent
drag.target：dragRect
drag.onActiveChanged：{
if（mouseArea.drag.active）{
listView.dragItemIndex = index;
}
dragRect.Drag.drop（）;
}
}
状态：[
状态{
when：dragRect.Drag.active
ParentChange {
target： dragRect
parent：root
}
AnchorChanges {
target：dragRect
anchors.horizontalCenter：undefined
anchors.verticalCenter：undefined
}
}
]
Drag.active：mouseArea.drag.active
Drag.hotSpot.x：dragRect.width / 2
拖动.hotSpot.y：dragRect.height / 2
}
}
}
ListView {
id：listView2
width：parent.width / 2
height：parent.height
anchors.right：parent.right
属性int dragItemIndex ：-1
DropArea {
id：dropArea
anchors.fill：parent
onDropped：{
listView2.model.append（listView.model。 get（listView.dragItemIndex））
listView.model.remove（listView.dragItemIndex）
listView.dragItemIndex = -1;
}
}
model：ListModel {
Component.onCompleted：{
for（var i = 0; i< 1; ++ i ）{
append（{value：i}）;
}
}
}
委托：项目{
id：delegateItem2
width：listView2.width
height：50
矩形{
id：dragRect2
width：listView2.width
height：50
anchors.horizontalCenter：parent.horizontalCenter
anchors。 verticalCenter：parent.verticalCenter
颜色：salmon
border.color：Qt.darker（color）
文本{
anchors.centerIn：parent
文本：modelData
}
}
}
}
}
}
I am developing a QML application which basically contains two ListView. I would like to copy a QML item from one ListView to another. I tried to handle this by setting Drag property in the delegate but the item cannot go outside the view when I drag the item, I think the Flickable container handles mouse events.
So, I want to try the following:
- create a mousearea which overlaps the to ListView
- create a new object by calling **createComponent() / createObject()**
- reparent this object to the mousearea
- handle mouse events in the mousearea till drop
This solution seems to me a little complicated, so do you have a better way to achieve this ?
This was a bad idea and too much complicated. I think I got a way to achieve this:
- each delegate of the ListView has a hidden Item which can be dragged,
- as my ListView are in a reusable component, I use a property to pass a higher item (a Rectangle here and NOT a **MouseArea**) which can be used as parent for dragged items,
- the higher item contains the two ListView (and maybe more in the future),
- when the drag begins, the item is set to visible and reparented using a **State**
So, I missed the point that set the parent should solve my problem.
Next code is just an idea, but the key is to have a MouseArea inside a delegate for the first ListView so the user can drag the items and drop them into a DropArea which belongs to the second ListView.
In this example, model is very simple, just a number. And when the item is dropped, it is removed from the first ListView:
listView.model.remove(listView.dragItemIndex)
Just remove that line of code to copy the item instead of removing.
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 600
height: 600
Rectangle {
id: root
width: 400
height: 400
ListView {
id: listView
width: parent.width / 2
height: parent.height
property int dragItemIndex: -1
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 10; ++i) {
append({value: i});
}
}
}
delegate: Item {
id: delegateItem
width: listView.width
height: 50
Rectangle {
id: dragRect
width: listView.width
height: 50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "salmon"
border.color: Qt.darker(color)
Text {
anchors.centerIn: parent
text: modelData
}
MouseArea {
id: mouseArea
anchors.fill: parent
drag.target: dragRect
drag.onActiveChanged: {
if (mouseArea.drag.active) {
listView.dragItemIndex = index;
}
dragRect.Drag.drop();
}
}
states: [
State {
when: dragRect.Drag.active
ParentChange {
target: dragRect
parent: root
}
AnchorChanges {
target: dragRect
anchors.horizontalCenter: undefined
anchors.verticalCenter: undefined
}
}
]
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: dragRect.width / 2
Drag.hotSpot.y: dragRect.height / 2
}
}
}
ListView {
id: listView2
width: parent.width / 2
height: parent.height
anchors.right: parent.right
property int dragItemIndex: -1
DropArea {
id: dropArea
anchors.fill: parent
onDropped: {
listView2.model.append(listView.model.get(listView.dragItemIndex))
listView.model.remove(listView.dragItemIndex)
listView.dragItemIndex = -1;
}
}
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 1; ++i) {
append({value: i});
}
}
}
delegate: Item {
id: delegateItem2
width: listView2.width
height: 50
Rectangle {
id: dragRect2
width: listView2.width
height: 50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "salmon"
border.color: Qt.darker(color)
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
}
}
这篇关于如何在QML中的ListView之外拖动一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
