概念 - 视觉父节点在Qt Quick

视觉父节点

在使用Qt Quick 创建可视化场景时，理解“可视化父级”这一概念至关重要。

Qt Quick 中的视觉父级概念与QObject 父级层次结构中的对象父级概念虽不相同，但彼此相关。所有 QML 对象都有一个对象父级，该父级由声明该对象的对象层次结构决定。 在使用QtQuick 模块时，Item 类型是该模块提供的所有视觉项的基础类型，它引入了额外的“视觉父级”概念，该概念由项的parent 属性定义。每个项都有一个视觉父级；如果项的parent 属性值为null ，则该项不会在场景中渲染。

出于内存管理目的，任何被赋值给项的data 属性的对象，都将成为该项在QObject 层次结构中的子项。 此外，如果添加到 data 属性的对象属于Item 类型，它也会被分配给Item::children 属性，并成为视觉场景层次结构中该项的子项。（大多数Qt Quick 层次结构遍历算法，尤其是渲染算法，只考虑视觉父级层次结构。）

为方便起见，Item 的data 属性是其默认属性。这意味着，在Item 对象中声明的任何子项，如果未被分配给特定属性，则会自动分配给data 属性，并如上所述成为该项的子项。 因此，下面的两个代码块会产生相同的结果，您几乎总是会看到左下图所示的形式，而不是右下图中显式的 `data ` 赋值：

import QtQuick 2.0

Item {
    width: 100; height: 100

    Rectangle { width: 50;
                height: 50;
                color: "red" }
}

import QtQuick 2.0

Item {
    width: 100; height: 100

    data: [
        Rectangle { width: 50;
                    height: 50;
                    color: "red" }
    ]
}

通过设置项的parent 属性，可以随时更改其视觉父项。因此，项的视觉父项不一定与其对象父项相同。

当一个项目成为另一个项目的子项目时：

• 子项的 `parent ` 属性指向其父项
• 父项的children 和childrenRect 属性会将该子项纳入考量

将一个项声明为另一个项的子项，并不自动意味着该子项会自动调整位置或大小以适应其父项。 某些 QML 类型可能具有影响子项定位的内置行为——例如，Row 对象会自动将其子项重新定位为水平排列——但这些行为是由类型自身的特定实现强制执行的。 此外，除非父项的clip 属性被设置为true，否则父项不会自动裁剪其子项，以使其在视觉上包含在父项的视觉边界内。

在特定情况下，可能会考虑项目的视觉父项，如下文各节所述。

项目坐标

由于项的坐标是相对于视觉父项的，因此可能会受到视觉层级结构变化的影响。更多详细信息请参阅“视觉坐标”概念页面。

堆叠顺序

Qt Quick 项目采用递归绘制算法来确定发生冲突时哪些项目应绘制在最上方。通常情况下，项目会按照其创建顺序（或 QML 文件中指定的顺序）绘制在其父项目之上。因此，在下面的示例中，蓝色矩形将绘制在绿色矩形之上：

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        width: 256
        height: 256
        color: "green"
    }

    Rectangle {
        x: 64
        y: 172
        width: 256
        height: 256
        color: "blue"
    }
}

由于该算法会递归遍历视觉项层次结构，因此绿色矩形的任何子项也将绘制在蓝色矩形下方，并位于蓝色矩形所有子项的下方。

可以通过Item::z 属性来影响堆叠顺序。小于 0 的 z 值将使该项位于父项下方；如果为同级项指定了 z 值，则它们将按 z 值顺序堆叠（若 z 值相等，则以创建顺序决定先后）。z 值仅影响该项与同级项及父项之间的堆叠顺序。 如果某个元素被其父元素之上的子树遮挡，则无论该元素设置何种 z 值，都无法提高其堆叠顺序以使其位于该子树之上。要使该元素位于其他子树之上，必须修改层次结构中更上层的 z 值，或者重新排列视觉元素的层次结构。

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        z: 1
        width: 256
        height: 256
        color: "green"

        Rectangle {
            x: 192
            y: 64
            z: 2000
            width: 128
            height: 128
            color: "red"
        }
    }

    Rectangle {
        x: 64
        y: 192
        z: 2
        width: 256
        height: 256
        color: "blue"
    }
}

在上例中，红色矩形的 z 值较高，但仍位于蓝色矩形下方。这是因为它是绿色矩形的子项，而绿色矩形是蓝色矩形的同级项。 绿色矩形的 z 值低于蓝色矩形，因此绿色矩形及其所有子元素都会被堆叠在蓝色矩形下方。

Canvas 所有权

Qt Quick 场景中渲染内容的定义，是由以QQuickWindow::contentItem 为根节点的视觉项树决定的。因此，若要将一个Item添加到特定的Qt Quick 场景中进行渲染，它必须成为视觉项层级中某个已存在Item（例如QQuickWindow::contentItem ）的视觉层级子项。