Layering of custom QQuickItem-based qml item and built-in qml items

I have created an item named “Node” that is derived from QQuickItem and draws a circle.

If I do something like:

Item {
Rectangle

{ x: 50 y: 50 width: 100 height: 100 color: "#FFFF0000" }

Node

{ x: 100 y: 100 radius: 20 color: "#FFFFCC00" }

}

The Node item is drawn below the Rectangle which is not what is expected. The ordering doesn’t change even if I change the z-value of the Node.

If I do something like:

Item {
Node

{ x: 50 y: 50 radius: 100 color: "#FFFF0000" }

Node

{ x: 100 y: 100 radius: 20 color: "#FFFFCC00" }

}

Then the expected ordering is followed.

Also, re-parenting Node as a child of Rectangle like this:

Rectangle {
x: 50
y: 50
width: 100
height: 100
color: "#FFFF0000"

Node

{ x: 80 y: 80 radius: 20 color: "#FFFFCC00" }

}

Still renders Node behind the rectangle.

The same behavior is followed when testing with the "TriangleItem" that is provided is provided as an example in page 45 of the "Integrating QML with C++ Training Course" pdf that can be found in:

http://qt.digia.com/Global/Images/Qt/Files/QtEssentialsQtQuick/qml-cpp-integration.pdf

-Nikolas Psaroudakis