查看项目在qml中被放置在放置区域之外 [英] View Item gets dropped outside drop area in qml
本文介绍了查看项目在qml中被放置在放置区域之外的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我实现了一个Gridview，它有不同的图像，我需要将其拖出网格视图并放置在DropArea中。我遵循如何将项目拖到QML外的ListView外但是现在我的网格物品可以在任何地方拖到整个页面中。我需要将其限制为DropArea。 它在网格项目中也存在分层问题。我正在尝试将拖动的图块放到最顶层视图中
我对Qt完全新鲜
这是我的代码
导入QtQuick 2.0
项目{
id：media_item
anchors.fill ：父母
长方形
{
y：100
id：holder_box
width：450
height： 150
color：＃99000000
radius：5
GridView {
id：grid
anchors.fill：parent
model： mediaModel
委托：项目{
id：main_item
width：grid.cellWidth;
height：grid.cellHeight
矩形{
id：item; parent：grid
color：mediagraphic
x：main_item.x; y：main_item.y
width：100;身高：100;
x {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
y {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
}
Drag.active：mouseArea.drag.active
Drag.hotSpot.x：main_item.width / 2
Drag.hotSpot。 y：main_item.height / 2
MouseArea {
id：mouseArea
anchors.fill：main_item
drag.target：main_item
drag.onActiveChanged：{
if（mouseArea.drag.active）{
grid.dragItemIndex = index;
}
main_item.Drag.drop（）;
}
}
状态：[
状态{
name：'dragged'
when：main_item.Drag。活动
PropertyChanges {
target：main_item
x：x
y：y
}
ParentChange
{
target：main_item
$ parent：topDrag
}
}
]
onStateChanged：console.log（'State'，state）
}
交互：false
anchors.topMargin：-30
property int dragItemIndex：-1
ListModel {
id：mediaModel
ListElement {mediagraphic：orchid
songname：Song 1}
ListElement {mediagraphic：pink
songname：Song 2}
$ List
$ b ListElement {mediagraphic：lighpink
songname：Song 4}
ListElement {mediagraphic：蓝色
songname：Song 5}
ListElement {mediagraphic：gray
songname：Song 6}
}
Component
{
id：grid_component
Item {
id：main_item
width：grid.cellWidth;
height：grid.cellHeight
矩形{
id：item; parent：grid
color：mediagraphic
x：main_item.x; y：main_item.y
width：100;身高：100;
x {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
y {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
}
Drag.active：mouseArea.drag.active
Drag.hotSpot.x：main_item.width / 2
Drag.hotSpot。 y：main_item.height / 2
MouseArea {
id：mouseArea
anchors.fill：main_item
drag.target：main_item
drag.onActiveChanged：{
if（mouseArea.drag.active）{
grid.dragItemIndex = index;
}
main_item.Drag.drop（）;
}
}
状态：[
状态{
name：'dragged'
when：main_item.Drag。活动
PropertyChanges {
target：main_item
x：x
y：y
}
ParentChange
{
target：main_item
$ parent：media_item
}
}
]
onStateChanged：console.log（'State'，state）
}
}
}
矩形
{
id：now_playing_rect
height：parent.height
width：parent.width / 2
x：640
颜色： 透明
DropArea
{
id：dropArea
width：200
height：200
anchors.centerIn：父
onDropped：
{
song_details.text = grid.model.get（grid.dragItemIndex）.songname
selected_song_image.color = grid.model.get（grid.dragItemIndex） .mediagraphic
mediaModel.remove（grid.dragItemIndex）
}
}
矩形{
id：selected_song_image
width：200
$ height：200
anchors.centerIn：parent
}
矩形{
id：next
color：'green'
anchors .verticalCenter：now_playing_rect.verticalCenter
anchors.left：dropArea.right
width：50
height：50
}
Rectangle {
id：previous
color：'brown'
anchors.verticalCenter：now_playing_rect.verticalCenter
anchors.right：dropArea.left
width：50
高度：50
}
文本{
id：song_details
text：qsTr（Song Title）
anchors.top：dropArea.bottom
font.pointSize：30
color：White
anchors.horizontalCenter：parent.horizontalCenter
}
}
Item {
id：topDrag
anchors.fill：parent
}
}
解决方案
我编辑了您的示例。因为我没有Images，所以我把所有东西都改成了带有颜色的矩形，以使它运行。
对于将来的笔记，如果我可以从开始。
主要的变化，你正在寻找的是在国家。
通过为x和y设置ChangeProperty，它们将在状态变回时重新设置。
Item {
id：media_item
anchors.fill：父
$ b长方形
{
y：100
id：holder_box
width：450
height：150
color：＃99000000
radius：5
GridView {
id：grid
anchors.fill：parent
model：mediaModel
delegate：grid_component
interactive：false
anchors.topMargin：-30
property int dragItemIndex：-1
}
ListModel {
id：mediaModel
ListElement {mediagraphic：orchid
songname：Song 1}
ListElement {mediagraphic：pink
songname：Song 2}
ListElement {mediagraphic：purple
songname：Song 3}
ListElement {mediagraphic：lighpink
songname：Song 4}
ListElement {mediagraphic：blue
songname：Song 5}
ListElement {mediagraphic：gray
songname：Song 6}
}
组件
{
id：grid_component
项目{
id：main_item
width：grid.cellWidth;
height：grid.cellHeight
矩形{
id：item; parent：grid
color：mediagraphic
x：main_item.x; y：main_item.y
width：100;身高：100;
x {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
y {NumberAnimation {duration：400; easing.type：Easing.OutBack}}
}
Drag.active：mouseArea.drag.active
Drag.hotSpot.x：main_item.width / 2
Drag.hotSpot。 y：main_item.height / 2
MouseArea {
id：mouseArea
anchors.fill：main_item
drag.target：main_item
drag.onActiveChanged：{
if（mouseArea.drag.active）{
grid.dragItemIndex = index;
}
main_item.Drag.drop（）;
}
}
状态：[
状态{
name：'dragged'
when：main_item.Drag。活动
PropertyChanges {
target：main_item
x：x
y：y
}
}
]
onStateChanged ：console.log（'State'，state）
}
}
}
矩形
{
id： now_playing_rect
height：parent.height
width：parent.width / 2
x：640
颜色：透明
DropArea
{
id：dropArea
width：200
height：200
anchors.centerIn：parent
onDropped：
{
song_details.text = grid.model.get（grid.dragItemIndex）.songname
selected_song_image.color = grid.model.get（grid.dragItemIndex）.mediagraphic
mediaModel.remove（grid.dragItemIndex）
}
}
矩形{
id：selected_song_image
width：200
height：200
anchors.centerIn：父
}
矩形{
id：next
颜色：'green'
anchors.verticalCenter：now_playing_rect。 verticalCenter
anchors.left：dropArea.right
width：50
height：50
}
Rectangle {
id：previous
color：'brown'
anchors.verticalCenter：now_playing_rect.verticalCenter
anchors.right：dropArea.left
width：50
height：50
}
文本{
id：song_details
text：qsTr（Song Title）
anchors .top：dropArea.bottom
font.pointSize：30
color：White
anchors.horizontalCenter：parent.horizontalCenter
}
}
}
我认为它应该像预期的那样行事
请不要忘记接受我的回答，如果这是你要找的。
I implemented an Gridview and it has different images in them i need to drag items out of the grid view and place it in a DropArea. I followed How to drag an item outside a ListView in QML But now my grid item can be dragged throughout the page anywhere.I need to restrict this to the DropArea. It also has the layering issue in grid items. I am trying to bring the dragged tile to the topmost view I am completely fresh to Qt
Here is my code
import QtQuick 2.0
Item {
id: media_item
anchors.fill: parent
Rectangle
{
y: 100
id: holder_box
width: 450
height: 150
color: "#99000000"
radius: 5
GridView {
id: grid
anchors.fill: parent
model: mediaModel
delegate: Item {
id: main_item
width: grid.cellWidth;
height: grid.cellHeight
Rectangle {
id: item; parent: grid
color: mediagraphic
x: main_item.x; y: main_item.y
width: 100; height: 100;
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
}
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: main_item.width / 2
Drag.hotSpot.y: main_item.height / 2
MouseArea {
id: mouseArea
anchors.fill: main_item
drag.target: main_item
drag.onActiveChanged: {
if (mouseArea.drag.active) {
grid.dragItemIndex = index;
}
main_item.Drag.drop();
}
}
states: [
State {
name: 'dragged'
when: main_item.Drag.active
PropertyChanges {
target: main_item
x: x
y: y
}
ParentChange
{
target: main_item
parent: topDrag
}
}
]
onStateChanged: console.log('State', state)
}
interactive: false
anchors.topMargin: -30
property int dragItemIndex: -1
}
ListModel {
id: mediaModel
ListElement { mediagraphic: "orchid"
songname: "Song 1"}
ListElement {mediagraphic: "pink"
songname: "Song 2"}
ListElement {mediagraphic: "purple"
songname: "Song 3"}
ListElement {mediagraphic: "lighpink"
songname: "Song 4"}
ListElement {mediagraphic: "blue"
songname: "Song 5"}
ListElement {mediagraphic: "grey"
songname: "Song 6"}
}
Component
{
id: grid_component
Item {
id: main_item
width: grid.cellWidth;
height: grid.cellHeight
Rectangle {
id: item; parent: grid
color: mediagraphic
x: main_item.x; y: main_item.y
width: 100; height: 100;
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
}
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: main_item.width / 2
Drag.hotSpot.y: main_item.height / 2
MouseArea {
id: mouseArea
anchors.fill: main_item
drag.target: main_item
drag.onActiveChanged: {
if (mouseArea.drag.active) {
grid.dragItemIndex = index;
}
main_item.Drag.drop();
}
}
states: [
State {
name: 'dragged'
when: main_item.Drag.active
PropertyChanges {
target: main_item
x: x
y: y
}
ParentChange
{
target: main_item
parent: media_item
}
}
]
onStateChanged: console.log('State', state)
}
}
}
Rectangle
{
id: now_playing_rect
height: parent.height
width: parent.width/2
x: 640
color: "Transparent"
DropArea
{
id: dropArea
width: 200
height: 200
anchors.centerIn: parent
onDropped:
{
song_details.text = grid.model.get(grid.dragItemIndex).songname
selected_song_image.color = grid.model.get(grid.dragItemIndex).mediagraphic
mediaModel.remove(grid.dragItemIndex)
}
}
Rectangle {
id: selected_song_image
width: 200
height: 200
anchors.centerIn: parent
}
Rectangle {
id: next
color: 'green'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.left: dropArea.right
width: 50
height: 50
}
Rectangle {
id: previous
color: 'brown'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.right: dropArea.left
width: 50
height: 50
}
Text {
id: song_details
text: qsTr("Song Title")
anchors.top: dropArea.bottom
font.pointSize: 30
color: "White"
anchors.horizontalCenter: parent.horizontalCenter
}
}
Item {
id: topDrag
anchors.fill: parent
}
}
解决方案
I edited your Example. As I had no Images, I changed everything to Rectangles with colors, to make it running.
For future note, it would be nice, if I could run your example from the beginning.
The main change, you are looking for is in the states. By setting a "ChangeProperty" for x and y, they will be resetted when the state changes back.
Item {
id: media_item
anchors.fill: parent
Rectangle
{
y: 100
id: holder_box
width: 450
height: 150
color: "#99000000"
radius: 5
GridView {
id: grid
anchors.fill: parent
model: mediaModel
delegate: grid_component
interactive: false
anchors.topMargin: -30
property int dragItemIndex: -1
}
ListModel {
id: mediaModel
ListElement { mediagraphic: "orchid"
songname: "Song 1"}
ListElement {mediagraphic: "pink"
songname: "Song 2"}
ListElement {mediagraphic: "purple"
songname: "Song 3"}
ListElement {mediagraphic: "lighpink"
songname: "Song 4"}
ListElement {mediagraphic: "blue"
songname: "Song 5"}
ListElement {mediagraphic: "grey"
songname: "Song 6"}
}
Component
{
id: grid_component
Item {
id: main_item
width: grid.cellWidth;
height: grid.cellHeight
Rectangle {
id: item; parent: grid
color: mediagraphic
x: main_item.x; y: main_item.y
width: 100; height: 100;
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
}
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: main_item.width / 2
Drag.hotSpot.y: main_item.height / 2
MouseArea {
id: mouseArea
anchors.fill: main_item
drag.target: main_item
drag.onActiveChanged: {
if (mouseArea.drag.active) {
grid.dragItemIndex = index;
}
main_item.Drag.drop();
}
}
states: [
State {
name: 'dragged'
when: main_item.Drag.active
PropertyChanges {
target: main_item
x: x
y: y
}
}
]
onStateChanged: console.log('State', state)
}
}
}
Rectangle
{
id: now_playing_rect
height: parent.height
width: parent.width/2
x: 640
color: "Transparent"
DropArea
{
id: dropArea
width: 200
height: 200
anchors.centerIn: parent
onDropped:
{
song_details.text = grid.model.get(grid.dragItemIndex).songname
selected_song_image.color = grid.model.get(grid.dragItemIndex).mediagraphic
mediaModel.remove(grid.dragItemIndex)
}
}
Rectangle {
id: selected_song_image
width: 200
height: 200
anchors.centerIn: parent
}
Rectangle {
id: next
color: 'green'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.left: dropArea.right
width: 50
height: 50
}
Rectangle {
id: previous
color: 'brown'
anchors.verticalCenter: now_playing_rect.verticalCenter
anchors.right: dropArea.left
width: 50
height: 50
}
Text {
id: song_details
text: qsTr("Song Title")
anchors.top: dropArea.bottom
font.pointSize: 30
color: "White"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
I think it should behave as expected?
Please do not forget to accept my answer, if it is what you were looking for.
这篇关于查看项目在qml中被放置在放置区域之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
