Dynamic object repair in QML is not performed on boot

Question

I am trying to create dynamically repeating QML objects generated in a repeater according to the data that they inherit from their model.

It works like a charm - with one catch. When an object is generated for the first time, it automatically returns to the parent Repeater after the ParentChange State object makes its changes. Run the following QML file in the QML viewer, paying attention to the order of the console messages to see what I am describing.

After you clicked on each of the objects, they behave as expected.

import QtQuick 1.1 Rectangle { id: container height: 300 width: 300 signal completed ListModel { id: fooModel ListElement { data: "red" } ListElement { data: "red" } ListElement { data: "blue" } } Component.onCompleted: { console.log("Rect Completed!") container.completed() } // The object I want to dynamically move Component { id: delg Rectangle { id: moveable height: 40; width: 100 border.width: 1; border.color: "black" state: model.data color: state // The following code makes it work, but feels very hackish /*Connections { target: container onCompleted: { moveable.parent = moveable.state == "red" ? red_col : blue_col } }*/ onStateChanged: { console.log("New state: " + state) } onParentChanged: { console.log("New parent: " + parent) } Component.onCompleted: { console.log("Delegate Completed!") } MouseArea { anchors.fill: parent onClicked: { // I know this is bad to do, but in my REAL application, // the change is triggered through the model, not the qml // object moveable.state = (moveable.state == "red" ? "blue" : "red") } } states: [ State { name: 'red' ParentChange { target: moveable; parent: red_col; x: 0 } }, State { name: 'blue' ParentChange { target: moveable; parent: blue_col; x: 0 } } ] transitions: [ Transition { ParentAnimation { NumberAnimation { properties: 'x,y,height,width' } } }] } } // Generates the Objects Repeater { id: repeat model: fooModel delegate: delg } // Display Row { spacing: 100 Column { id: red_col spacing: 10 width: 100; height: 300 move: Transition { NumberAnimation { properties: "y" } } add: Transition { NumberAnimation { properties: "y" } } } Column { id: blue_col spacing: 10 width: 100; height: 300 move: Transition { NumberAnimation { properties: "y" } } add: Transition { NumberAnimation { properties: "y" } } } } } 

I figured out a way to fix the behavior, but that’s not very. (See the Commented Connections code above for this fix.)

Is there a cleaner / less courageous way to do the same thing I'm trying here?

Answer 1

An easy way to do this is to add an additional Item under your delegate. This will return the Repeater Item , and your own code will set the new parent of its child - your Rectangle . Like this:

 import QtQuick 1.1 Rectangle { id: container height: 300 width: 300 signal completed ListModel { id: fooModel ListElement { data: "red" } ListElement { data: "red" } ListElement { data: "blue" } } Component.onCompleted: { console.log("Rect Completed!") container.completed() } // The object I want to dynamically move Component { id: delg Item { Rectangle { id: moveable height: 40; width: 100 border.width: 1; border.color: "black" state: model.data color: state // The following code makes it work, but feels very hackish /*Connections { target: container onCompleted: { moveable.parent = moveable.state == "red" ? red_col : blue_col } }*/ onStateChanged: { console.log("New state: " + state) } onParentChanged: { console.log("New parent: " + parent) } Component.onCompleted: { console.log("Delegate Completed!") } MouseArea { anchors.fill: parent onClicked: { // I know this is bad to do, but in my REAL application, // the change is triggered through the model, not the qml // object moveable.state = (moveable.state == "red" ? "blue" : "red") } } states: [ State { name: 'red' ParentChange { target: moveable; parent: red_col; x: 0 } }, State { name: 'blue' ParentChange { target: moveable; parent: blue_col; x: 0 } } ] transitions: [ Transition { ParentAnimation { NumberAnimation { properties: 'x,y,height,width' } } }] } } } // Generates the Objects Repeater { id: repeat model: fooModel delegate: delg } // Display Row { spacing: 100 Column { id: red_col spacing: 10 width: 100; height: 300 move: Transition { NumberAnimation { properties: "y" } } add: Transition { NumberAnimation { properties: "y" } } } Column { id: blue_col spacing: 10 width: 100; height: 300 move: Transition { NumberAnimation { properties: "y" } } add: Transition { NumberAnimation { properties: "y" } } } } }