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