Концепции - Визуальный родитель в 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.