Концепции - Визуальный родитель в 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 зеленого прямоугольника ниже, чем синего прямоугольника, поэтому зеленый прямоугольник и все дочерние элементы будут отображаться под синим прямоугольником.

Владение канвасом

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