Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

z index not working for dynamic elements



  • This is example with dynamic elements is working correctly. But i need what red circile be always on top for each squares on dragging, but even explicit z index not helps. How to do that?

    Rectangle{
    
                anchors.top: parent.top
                anchors.left: schemesList.right
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                color: "transparent"
    
                Component{
    
                    id: item
    
                    Rectangle{
                        x: 200
                        y: 100
                        z: 0 
                        height: 40
                        width: 180
                        color: dragTarget.containsDrag ?  "blue" :  "red"
    
                        MouseArea{
                            anchors.fill: parent
                            drag.target: parent
                        }
    
                        DropArea{
                            id: dragTarget
                            anchors.fill: parent
                        }
    
                        Rectangle{
                            id: tg
                            x: -width
                            y: height / 2
                            z: 1
                            width: 20
                            height: 20
                            radius: 100
    
                            color: mouseArea.drag.active ? "green" : "red"
                            Drag.active: mouseArea.drag.active
    
                            MouseArea{
                                id: mouseArea
                                anchors.fill: parent
                                drag.target: parent
                            }
    
                        }
    
                    }
    
                }
    
                Component.onCompleted: {
                    item.createObject(parent, {z: 0});
                    item.createObject(parent, {y:200, z: 0});
                     item.createObject(parent, {y:300, z: 0});
                }
            }
    


  • @J-Hilk said in z index not working for dynamic elements:

    z: mouseArea.drag.active ? 1 : 0

    I found solution. Change z-index for parent element similar as recommend you "z: mouseArea.drag.active ? 1 : 0"


  • Moderators

    @exru
    this should work:

    Rectangle{
                            id: tg
                            x: -width
                            y: height / 2
                            z: mouseArea.drag.active ? 1 : 0
                            width: 20
                            height: 20
                            radius: 100
    
                            color: mouseArea.drag.active ? "green" : "red"
                            Drag.active: mouseArea.drag.active
    
                            MouseArea{
                                id: mouseArea
                                anchors.fill: parent
                                drag.target: parent
                            }
    
                        }
    

    make sure to remove the explicit z value during createObject, I'm pretty sure, that breaks the binding of z: mouseArea.drag.active ? 1 : 0



  • @J-Hilk said in z index not working for dynamic elements:

    z: mouseArea.drag.active ? 1 : 0

    Not working.


  • Moderators

    @exru Not enough information.



  • @J-Hilk said in z index not working for dynamic elements:

    z: mouseArea.drag.active ? 1 : 0

    I found solution. Change z-index for parent element similar as recommend you "z: mouseArea.drag.active ? 1 : 0"


Log in to reply