Many QML modules - Z values issue

qtd1d1

Hi,

we have many QML modules in our project.
The problem we are facing right now, is that each QML module has it's own "z-universe".
For Example:
2 Rectangles with different z-values defined in different QML Modules.
Rectangle1.qml
@Rectangle{
z:1
}@

Rectangle2.qml

@Rectangle{
z:2
}@

Main.qml

@Item{
Rectangle1{x:1; y:1}
Rectangle2{x:1; y:1}
}@

This is just an example, in our project we have many different items within one Module.

Problem: Z-Value of Rectangle2 > Z-Value of Rectangle1, but Rectangle1 is shown in front of Rectangle2
Reason: Each Module has its own Organization of z-Values.
Question: Is it Possible to apply the z-order of elements within different modules globally?

Thanks

lgeyer

Items with a higher z value are drawn on top of siblings with a lower z value.

In your example Rectangle1 has a z of 2, Rectangle2 has a z of 1, so Rectangle1 is drawn on top of Rectangle2. If you set the z value of Rectangle2 to a higher value than the z value of Rectangle1 it will be, as expected, drawn on top of it.

qtd1d1

Sorry, that was a mistake. I corrected it.

lgeyer

Does this mean that - as Rectangle2 is now shown correctly at top of Rectangle1 - your problem is solved?

qtd1d1

No, now the example is correct, but the problem remains. Sorry for the confusion.

lgeyer

Well, but your own example diproves your assumption that each module has its own z-ordering, as Rectangle2 actually is shown on top of Rectangle1, although its z value is specified in another module.

qtd1d1

Ok. youre right. My example isn't good at all. Now I have a better one, that explains my problem.
3 Rectangles: red, yellow are defined in one QML file and blue rectangle in other QML file
I want to get the blue rectangle in between the red and yellow rectangle.

RectOne.qml

@Item{
z: 1
Rectangle {
id: rect1
x: 10
y: 10
width: 100
height: 62
color: "red"
z:2
}
Rectangle {
id: rect2
x: 20
y: 20
width: 100
height: 62
color: "yellow"
z: 0
}
@

RectTwo.qml
@
Item
{
z:1
Rectangle {
id: rect3
x: 30
y: 30
width: 100
height: 62
color: "blue"
z:1
}
}
@

Main.qml
@Rectangle {
width: 100
height: 62
z: 0

RectOne{ x:1; y:1 }
RectTwo{ x:1; y:1 }

}@

Result:
Blue Rectangle: Front
Red Rectangle: Middle
Yellow Rectangle: Back

Regarding to your theory the Blue rectangle should be in between the red and yellow one, because of the z-order. But it isn't.

The main question: How do I get the blue Rectangle between the Red and yellow one?

vulee

Since the z order of the outer levels(the item level) works correctly ( blue rec on top), you could break red and yellow into two modules.

qtd1d1

Is there a solution without breaking the module into two modules?

lgeyer

This has actually nothing to do with different modules, but with parent items having a different z-value, which cannot be exceeded by children. This is a rule that applies to other properties as well, like opacity.
@
Rectangle {
width: 100
height: 100
color: "black"
Rectangle {
anchors.fill: parent
color: "green"
z: 1
Rectangle {
anchors.fill: parent
color: "blue"
z: 2
}
}
Rectangle {
anchors.fill: parent
color: "red"
z: 0
Rectangle {
anchors.fill: parent
color: "yellow"
z: 3
}
}
}
@
Items in QML form a hierarchical tree, and each level of a subtree has a common z-axis, which sets the stacking order of siblings. So in this case black has a z-axis, green and red have a common z-axis, blue has a z-axis and yellow has a z-axis.

You cannot paint across subtrees. If you want to set the z-order of different items you will have to make sure they are siblings of the same subtree (ie. they have the same parent).

qtd1d1

Ok, thanks. Question answered.