CODEWITHSUNDEEP
qtqmlqt-quickqtquick2reparenting
dtech
dtech

Reputation: 49289

Better way to reparent visual items in QML

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?

Upvotes: 5

Views: 5681

Answers (1)

user2859377
user2859377

Reputation: 51

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 } 
     }
 }
}

Upvotes: 5

Related Questions