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