How to use DropArea ?
-
Forgive my poor English.
I write two samples as following.
Sample1:
@import QtQuick 2.0Item {
width: 200; height: 200DropArea { x: 75; y: 75 width: 100; height: 100 Rectangle { anchors.fill: parent color: "green" } onEntered: console.debug("onEntered") onExited: console.debug('onExited') DropArea { width: 50; height: 50 Rectangle { anchors.fill: parent color: "blue" } onEntered: console.debug("onEntered 2") onExited: console.debug('onExited 2') } } Rectangle { x: 10; y: 10 width: 20; height: 20 color: "red" Drag.active: dragArea.drag.active MouseArea { id: dragArea anchors.fill: parent drag.target: parent } }
}@
Sample2:
@import QtQuick 2.0Item {
width: 200; height: 200Rectangle { x: 75; y: 75 width: 100; height: 100 color: "green" DropArea { anchors.fill: parent onEntered: console.debug("onEntered") onExited: console.debug('onExited') } Rectangle { width: 50; height: 50 color: "blue" DropArea { anchors.fill: parent onEntered: console.debug("onEntered 2") onExited: console.debug('onExited 2') } } } Rectangle { x: 10; y: 10 width: 20; height: 20 color: "red" Drag.active: dragArea.drag.active MouseArea { id: dragArea anchors.fill: parent drag.target: parent } }
}@
You see. The two samples is similiar. But their outputs is different.
You can do as following to test the two samples:- Drag the 'red' rectangle to 'blue' rectangle.
- Then drag the 'red' rectangle to 'green' rectangle.
- Then drag the 'red' rectangle back to 'blue' rectangle.
- Finally drag the 'red' rectangle back to 'white' background.
I use qmlscene to test the two samples in qt5.0.1.
The sample1's output is:
@onEntered
onEntered 2
onExited 2
onEntered 2
onExited 2
onExited@
The sample2's output is:
@onEntered 2onExited 2
onEntered
onExited@
So Where is the problem?
-
bq. So Where is the problem?
That a good question, what is the problem? Why did you write here?
-
My questions are :
1) Why the sample1’s output is different to sample2’s output ?
2) How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ? -
Sorry for my poor English.
I have to explain my question2 once more.
- How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?
----------- l only meant : What are the principles the qt quick follows to emit signals (like onEntered / onExited) of DropArea ?
- How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?
-
I can write another sample as following.
Sample3
@import QtQuick 2.0Item {
width: 500; height: 500Rectangle { id: rectGreen x: 50; y: 50 width: 100; height: 100 color: "green" DropArea { id: dropArea1 anchors.fill: parent onEntered: console.debug("onEntered") onExited: console.debug('onExited') } } Rectangle { id: rectBlue x: 100; y: 50; z: 10 width: 100; height: 100 color: "blue" opacity: 0.5 DropArea { id: dropArea2 anchors.fill: parent onEntered: console.debug("onEntered 2") onExited: console.debug('onExited 2') } } Rectangle { id: rectDrag x: 10; y: 10; z:20 width: 20; height: 20 color: "red" Drag.active: dragArea.drag.active MouseArea { id: dragArea anchors.fill: parent drag.target: parent } }
}@
I do as following to test this sample:- Drag 'rectDrag' to 'rectGreen'. --- console print: onEntered
- Then drag 'rectDrag' to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my third question.)
- Then drag 'rectDrag' to 'rectBlue'. --- console print: onExited onEntered 2
- Then drag 'rectDrag' back to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my fourth question.)
- Then drag 'rectDrag' to 'rectGreen'. --- console print: onExited 2 onEntered
- Finally drag 'rectDrag' back to 'white' background. --- console print: onExited
I use qmlscene to test this samples in qt5.0.1. (os: windows 7)
-
Not sure why you are unclear about these, maybe you missed some basics of QML;
-
items lower in the file are placed at higher z-index (i.e. on top) of stuff that came before it.
-
an mouse area or drop area on top of another blocks events from the one below it.
-
-
Thank you for your reply, Thomas Zander.
I know the basics of QML you mention.
My problem is that the behavior of the samples I have described doesn't follow the 'basic 2' (an mouse area or drop area on top of another blocks events from the one below it.).Check the 'Sample3'. 'dropArea2' is on top of 'dropArea1'.
When I do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.", the 'dropArea2' should block 'dropArea1' (console should print: onExited 2 onEntered) following the 'basic 2'. But it doesn't happen, so console prints nothing.
Notice: you should do "1) Drag ‘rectDrag’ to ‘rectGreen’. —- console print: onEntered" first, then do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.".Similiarly, you can check the 'Sample1' and 'Sample2'.
In 'Sample1', when I do "1) Drag the ‘red’ rectangle to ‘blue’ rectangle.", the console should print 'onEntered 2', but the console print 'onEntered onEntered 2'.
The DropArea hierarchy in 'Sample1' is the same as DropArea hierarchy in 'Sample2'. But their behavior is different. -
I am definitely seeing what you are seeing sanwangshan. It definitely appears that there are some peculiarities when rectangles intersect that have child DropAreas. I've been looking at your samples for about 15 minutes and still can't quite figure out how to characterize the behavior.
-
Yes, my question is like what stevenhurd said.
-
Everyone who is interesting in this thread should watch "QTBUG-30305":https://bugreports.qt-project.org/browse/QTBUG-30305?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel .