QML：在非兄弟姐妹上显示对象

Question

我的 QML 代码中有一个非常难以解决的问题。我会尽可能地总结它，因为它是很长的代码..

我编写了一个颜色选择器 qml 文件，当用户想要选择颜色时调用它。这是在一个大矩形中完成的，其中的小矩形均匀分布，有平面颜色可供选择。

我有一个父矩形，1 个外部中继器，嵌套在这个中继器中的是另一个内部中继器，它连续创建一个小矩形。外部中继器将内部中继器放在另一个中继器下方，这样它就可以用小矩形完全填充矩形，最好使用不同的颜色。

每个小矩形也有一个用动画突出显示自身的功能。这个动画是一个比矩形本身更大的圆。当用户从例如单击颜色时完成此操作。右侧的颜色历史记录，如果存在，它应该突出显示相应的颜色矩形。

现在，问题： 无论我使用什么 z 值，此动画都不会显示在其他矩形上方。它将被相邻的矩形阻挡。我研究过，似乎 z 值不考虑非兄弟姐妹，只考虑单亲中的所有项目。

这里有一些代码可以去掉所有不必要的垃圾。 需要注意的是，每个矩形都有自己的动画和鼠标区域。

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
                }
             }
          }
       }
    }
}

Answer 1

好的，要将一个项目绘制在另一个项目上，您至少有两种方法：

• z（仅限同级项目）
• 创建顺序（最后创建的最高）

我想第二种方式更适合你。所以你只需要在所有其他人之后创建圆圈项目。例如：

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