Hello, I’m trying to understand how to maintain an element of a GridView on top of others during a ParentAnimation. I think it’s best explained with this snippet, which I beg you to try out:
import QtQuick 2.2
Item {
width: 400; height: 400
id: main
GridView {
id: grid
anchors.fill: parent
cellWidth: width / Math.sqrt(model)
cellHeight: height / Math.sqrt(model)
model: 9
delegate: Rectangle {
id: rect
width: grid.cellWidth
height: grid.cellHeight
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
Text {
anchors.centerIn: parent
text: "ABABAB"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
MouseArea {
anchors.fill: parent
onClicked:
{
if (rect.state != "fullScreen")
rect.state = "fullScreen";
else
rect.state = "";
}
}
states: [
State {
name: "fullScreen"
ParentChange {
target: rect
parent: main
width: parent.width
height: parent.height
x: 0
y: 0
}
}
]
transitions: [
Transition {
ParentAnimation {
NumberAnimation { properties: "x, y, width, height"; duration: 500; easing.type: Easing.InQuad }
}
}
]
}
}
}
In practice, I zoom the selected element by changing its parent so that it can extend beyond the cell boundaries. And the zooming-in animation works fine: the rectangle is always painted on top of the others.
When zooming back though, the first thing that happens is that the parent is changed back to the gridview, therefore the rectangle is painted above previous elements but below the successive ones (in fact, the 1st element, at the top left, is always painted below all other elements whereas the 9th element, at the bottom right, is always painted like I want during the zooming-out animation).
How can I solve this problem? I came up with a solution but thinking in an imperative way, not in a declarative way like QML requires…
↧