Many QML modules - Z values issue



  • 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



  • 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.



  • Sorry, that was a mistake. I corrected it.



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



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



  • 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.



  • 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?



  • 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.



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



  • 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).



  • Ok, thanks. Question answered.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.