Концепции - Визуальный родитель в Qt Quick

Визуальный родитель

При создании визуальных сцен с Qt Quick важно понимать концепцию визуального родителя.

Концепция визуального родителя в Qt Quick отделена, но связана с концепцией родительского объекта в иерархии родительских объектов QObject. У всех объектов QML есть родительский объект, который определяется иерархией объектов в объявлении объекта. При работе с модулем QtQuick тип Item является базовым типом для всех визуальных элементов, предоставляемых этим модулем, и он обеспечивает концепцию дополнительного визуального родителя, определяемого свойством parent элемента. Каждый элемент имеет визуального родителя; если значение свойства parent элемента равно null, элемент не будет отображаться в сцене.

Любой объект, назначенный свойству data элемента, становится дочерним элементом элемента в иерархии QObject для управления памятью. Кроме того, если объект, добавленный в свойство data, является типом Item, он также назначается свойству Item::children и становится дочерним элементом элемента в иерархии визуальной сцены. (Большинство алгоритмов перемещения по иерархии Qt Quick, особенно алгоритмы отрисовки, учитывают только иерархию визуальных родителей.)

Для удобства свойство 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. Значения 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"
    }
}

В приведенном выше примере красное прямоугольник имеет высокое значение z, но все равно расположено ниже синего прямоугольника. Это связано с тем, что он является дочерним элементом зеленого прямоугольника, а зеленый прямоугольник является братом синего прямоугольника. Значение z зеленого прямоугольника ниже значения z синего прямоугольника, поэтому зеленый прямоугольник и все дочерние элементы будут размещены под синим прямоугольником.

Владение холстом

Определение того, что отображается в сцене Qt Quick, — это дерево визуальных элементов, укорененное в элементе QQuickWindow::contentItem. Поэтому, чтобы добавить элемент Item в определенную сцену Qt Quick для отображения, он должен стать дочерним элементом визуальной иерархии элемента, уже находящегося в визуальной иерархии, например, QQuickWindow::contentItem.