概念 - Qt Quick中的可视父级

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属性,可以随时更改项目的视觉父级。因此,项目的视觉父级不一定与其对象父级相同。

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

将一个项目声明为另一个项目的子项,并不意味着子项会自动适当地定位或调整大小以适应其父项。一些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"
    }
}
../_images/visual-parent-example.png

因为算法通过视觉项层次结构递归,绿色矩形的任何子项也将绘制在蓝色矩形下方以及蓝色矩形的任何子项下方。

堆叠顺序可以通过Item::z属性来影响。Z值小于0的项将堆叠在父项下方,如果分配了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"
    }
}
../_images/visual-parent-example2.png

在上面的例子中,红色矩形具有较高的z值,但仍然堆叠在蓝色矩形下方。这是因为它是绿色矩形的子元素,而绿色矩形是蓝色矩形的兄弟元素。绿色矩形的z值低于蓝色矩形,因此绿色矩形及其所有子元素将堆叠在蓝色矩形下方。

画布所有权

在Qt Quick场景中渲染内容的定义是根植于contentItem的视觉项树。因此,要将一个Item添加到特定的Qt Quick场景中进行渲染,它需要成为已经在视觉项层次结构中的Item的视觉层次子项,例如contentItem