GridLayout, ParentChange and ParentAnimation issue

  • 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!

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.