GridLayout, ParentChange and ParentAnimation issue
Unsolved
QML and Qt Quick
-
Hello,
I want a cell of a GridLayout to be zoomed in and out. The zoom process should be animated. Here's my code so far:
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("ZoomGrid Test") Item { id: window anchors.fill: parent GridLayout { id: grid anchors.fill: parent columnSpacing: 0 rowSpacing: 0 columns: 3 rows: 3 Repeater { model: parent.columns * parent.rows Rectangle { id: rectangle Layout.fillWidth: true Layout.fillHeight: true Layout.preferredWidth: 50 Layout.preferredHeight: 50 Layout.column: model.index % grid.columns Layout.row: model.index / grid.columns color: Qt.darker("lightblue", 1 + model.index * .2) states: State { name: "detached" ParentChange { target: rectangle parent: window x: 0 y: 0 width: grid.width height: grid.height } } transitions: Transition { ParentAnimation { NumberAnimation { properties: "x,y,width,height" duration: 100 } } } MouseArea { anchors.fill: parent onClicked: { rectangle.state = rectangle.state !== "detached" ? "detached" : "" } } } } } } }
The issue I have is when zooming back out. It seems the ParentChange gets applied first (put he rectangle back into the GridLayout) and then the ParentAnimation (handling the x,y,width and height changes) gets applied. That means the rectangles at the right hand side and the ones below cover parts of the (still zooming) rectangle which is still larger then the cell.
Is there a way to prevent the rectangle from beeing covered?Thanks in advance!