Question

我想知道QML中是否提供以下功能：无论子/父连接如何，我都需要一个子对象（此处为文本）始终位于其他对象之上。这是MWE：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

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

    Rectangle
    {
        id: rectMain;

        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        color: "white"

        Rectangle
        {
            id: rect1;

            width: 200;
            height: 200;

            x: 100;
            y: 100;

            color: "red";

            Text
            {
                id: theText;
                text: qsTr("text");

                anchors.centerIn: parent;
            }
        }

        Rectangle
        {
            id: rect2;

            width: 200;
            height: 200;

            x: 200;
            y: 200;

            color: "yellow";
        }
    }
}

它将显示此窗口：

如您所见，“文本”被rec2覆盖，因为它是rect1的子元素，它是在rect2之前创建的。使用当前的父/子连接，文本是否可能始终位于rect2的顶部？我将不胜感激。

Answer 1

这是我上面表达的想法。但是我真的可以想象如何使用它。如果可以定义您的真实目标，我们当然会找到另一个解决方案。

import QtQuick 2.11
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    width: 400
    height: 400
    visible: true
    title: "Example"

    Item {
        z: 1
        Repeater {
            id: rectGenerator
            property bool loaded: false
            Component.onCompleted: rectGenerator.loaded = true
            model: 10
            delegate: Rectangle {
                width: 100
                height: 100
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),0.8)
                x: Math.round(Math.random() * 300)
                y: Math.round(Math.random() * 300)
                Drag.active: dragArea.drag.active
                MouseArea {
                    id: dragArea
                    anchors.fill: parent
                    drag.target: parent
                }
            }
        }
    }

    Loader {
        z: 2
        sourceComponent: Repeater {
            model: rectGenerator.model
            delegate: Text {
                x: rectGenerator.itemAt(index).x
                y: rectGenerator.itemAt(index).y
                width: 100
                height: 100
                text: "item " + (index + 1)
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter                    
            }
        }
        active: rectGenerator.loaded
    }
}

使子对象始终位于顶部

1 个答案: