Better way to reparent visual items in QML

Question

It would seem that in the design of QML user reparent was not really "envisioned", because even though it is possible, it involves creating and changing states, which is just not convenient to add to each and every item.

 import QtQuick 1.0

 Item {
     width: 200; height: 100

     Rectangle {
         id: redRect
         width: 100; height: 100
         color: "red"
     }

     Rectangle {
         id: blueRect
         x: redRect.width
         width: 50; height: 50
         color: "blue"

         states: State {
             name: "reparented"
             ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
         }

         MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
     }
 }

I was wondering if there is a more elegant way to reparent items without polluting items with unnecessary states?

Answer 1

not certain if you need to use QtQuick 1.0, but with 2.0 this also works and is imo more straight forward.

import QtQuick 2.0

Item {
     width: 200; height: 100

 Rectangle {
     id: redRect
     width: 100; height: 100
     color: "red"
 }

 Rectangle {
     id: blueRect
     x: redRect.width
     width: 50; height: 50
     color: "blue"

     MouseArea { anchors.fill: parent; onClicked: 
         { blueRect.parent = redRect; blueRect.x = 10; blueRect.y = 10 } 
     }
 }
}