QML: Show object over non siblings

Question

I have a somehow very hard to solve problem in my QML code. I will summarize it the best I can since it is very long code..

I write a color picker qml file that is called when the user wants to pick a color. This is done in a big rectangle with little rectangles in it evenly distributed that have flat colors to choose from.

I have a parent rectangle, 1 outer repeater and nested in this repeater is another inner repeater that creates little rectangle in a row. The outer repeater places the inner repeaters under another so it fills the rectangle with little rectangles fully, preferably with different colors.

Every little rectangle also has a function that highlights itself with an animation. This animation is a circle that gets bigger than the rectangle itself. This is done so when the user clicks a color from e.g. a color history on the right, it should highlight the corresponding colors rectangle if is there.

Now, the problem: No matter what z values I use, this animation won't show above the other rectangles. It will get blocked by neighboring rectangles. I have researched and it seems that z values don't account for non siblings, just for all items in a single parent.

Here's some code that leaves out all the unnecessary junk. To note is that every rectangle has its own animation and mousearea.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    color: 'black'
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
    id: parentRectangle

    width: 400
    height: 400

    property int numberOfBoxesInARow: 5
    property int numberOfBoxesInAColumn: 5

       Repeater {
          id: outerRepeater

          model: parentRectangle.numberOfBoxesInARow

          Repeater {
             id: innerRepeater
             model: parentRectangle.numberOfBoxesInAColumn

             y: parentRectangle.height / parentRectangle.numberOfBoxesInAColumn * outerIndex
             x: 0

             height: parent.height / parentRectangle.numberOfBoxesInAColumn
             width: parent.width

             property int outerIndex: index

             Rectangle {
                id: individualRectangle
                color: Qt.rgba(1 / (outerIndex + 1), 0, 1 / (index + 1), 1)

                x: parentRectangle.width / parentRectangle.numberOfBoxesInARow * index
                y: outerIndex * parentRectangle.height / parentRectangle.numberOfBoxesInAColumn

                width: parentRectangle.width / parentRectangle.numberOfBoxesInARow
                height: parent.height / parentRectangle.numberOfBoxesInAColumn

                Component.onCompleted: {
                    console.log("Rectangle at " + outerIndex + "|" + index + " created, width / height: " + width.toFixed(2) + "| " + height.toFixed(2))
                }

                MouseArea {
                   anchors.fill: parent
                   onClicked: {
                      highlightAnimation.running = true
                   }
                }

                Rectangle {

                   id: highlightCircle

                   visible: highlightAnimation.running

                   color: 'white'

                   anchors.horizontalCenter: parent.horizontalCenter
                   anchors.verticalCenter: parent.verticalCenter
                   property real size: 0
                   width: size
                   height: size
                   radius: size/2
                }

                PropertyAnimation {
                   id: highlightAnimation
                   target: highlightCircle
                   property: 'size'
                   from: 200
                   to: 0
                   duration: 500
                }
             }
          }
       }
    }
}

please provide minimal reproducible example, not some pseudo code. Rectangle has no onClicked event you probably missed something. — folibis
I have updated the code to hopefully have everything needed to run it fully — SlapmyFace
Did you run the provided code? As for me I see nothing which is quite explainable because there is no fill color for the rectangles. PropertyAnimation.property should be string, not int. Please provide working example, otherwise we cannot run and test your code. — folibis
I'm sorry, it's my first post on this site... Its now a runnable qml file that shows the problem I have. If you run it and click a rectangle, the animation for it is blocked by others that are drawn after it, and no z value fixes this. thank you for helping, — SlapmyFace

folibis folibis · Accepted Answer · 2020-07-27T11:36:37

Ok, to paint an item over another one you have at least 2 ways:

z (for siblings items only)
creating order (the last created is the highest)

I guess that the second way is preferable for you. So you just need to create the circle item after all others. For example:

Repeater {
    id: outerRepeater       
    Repeater {
        id: innerRepeater
        
        ...    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    highlightCircle.item = individualRectangle;
                    highlightAnimation.running = true;
                }
            }
        }
    }
}

Rectangle {        
    id: highlightCircle
    property var item
    ...
    anchors.horizontalCenter: item ? item.horizontalCenter : undefined
    anchors.verticalCenter: item ? item.verticalCenter : undefined        
}

PropertyAnimation {
    id: highlightAnimation
    ...
}

QML: Show object over non siblings

1 Answers