MouseArea steals events! Bug or misunderstanding?
-
First of all, "here":https://docs.google.com/file/d/0B4r5nJvpzEHGY1BHakRldV9WaUk/edit?usp=sharing is full code of my programme.
So, I created something like tab widget, with tabs in left area, and with user widgets in right area:
!http://img-fotki.yandex.ru/get/5009/11330794.1c/0_a5350_261d4a97_orig!Then I add in this tab widget two simple widgets.
@
property ListModel tabsModel: ListModel {
ListElement { name: "Widget0"; componentName: "SomeWidget0.qml"; }
ListElement { name: "widget1"; componentName: "SomeWidget1.qml"; }
}
@These widgets can alter its background colour on mouse click:
@
import QtQuick 2.1
Rectangle {
color: "red"
property int colour: 1
MouseArea {
anchors.fill: parent;
onClicked: {
console.log("clicked SomeWidget0 x=" + parent.x + ", y=" + parent.y + ", w=" + parent.width + "h=" + parent.height);
if(parent.colour % 2) parent.color = "darkred";
else parent.color = "red"
++parent.colour
}
}
}
@Most important thing is that every user-widget has two states - hidden and shown.
Hidden state is described in such way:
@
// Hide old widget
listView.currentItem.widgetLoader.x = -10000;
listView.currentItem.widgetLoader.y = -10000;
listView.currentItem.widgetLoader.scale = hiddenScale;
listView.currentItem.widgetLoader.opacity = 0;
@Shown state is described in such way:
@
// Show new widget
listView.currentItem.widgetLoader.x = 0;
listView.currentItem.widgetLoader.y = 0;
listView.currentItem.widgetLoader.scale = 1;
listView.currentItem.widgetLoader.opacity = 1
@Problems starts here:
when I start app and click on "Widget1" on the right pane, second user-widget appears (ok), when I click on shown widget it really change its colour (ok), but, when I click on "Widget0", second widget hides (still ok), first widget appears (ok) but it does not alter its colour! Furthermore console.log says that I actually click on second widget which is hidden!I also found two workarounds
- In hidden state scale must NOT be equal 0, but must be a bit bigger than 0 (0.000001 for example)
- Explicitly set z property for user widgets
So is it bug, or I do not understand something?
-
Why don't you simply set visible property to false? The component would stop receiving mouse and keyboard event then. You can also modify the "z" value to push it back. No need to modify the coordinates and scale.
Or you can use the Loader element and create those tabs at will.
-
Because actually I animate scale, x, y and opacity while "hiding" and showing user page.
I am trying to achieve effect similar to one when you minimize/maximize window (in for example, KDE)
-
That is understandable. So you need to either modify "z" (can be tricky) or set visible to false after your animation is done. This will ensure that the componet does not get mouse or keyboard focus/ events.
Although just setting the coordinates like you do should work just as well. I don't know why it does not work for you. Perhaps you can share the code responsible for loading those components, maybe the issue lies there.
-
bq. Perhaps you can share the code responsible for loading those components, maybe the issue lies there.
All code "here":https://docs.google.com/file/d/0B4r5nJvpzEHGY1BHakRldV9WaUk/edit?usp=sharing
As I wrote here is model data in which I specify what to load
@
property ListModel tabsModel: ListModel {
ListElement { name: "Widget0"; componentName: "SomeWidget0.qml"; }
ListElement { name: "widget1"; componentName: "SomeWidget1.qml"; }
}
@And this it Loader itself:
@
Loader {
id: widgetLoader;
source: componentName;
parent: userPagePlaceHolder;
width: userPagePlaceHolder.width;
height: userPagePlaceHolder.height;
x: -10000;
y: -10000
scale: hiddenScale
opacity: 0
}
@