QT: QML可视化树(Visual Parent)简介

目的

本文简介QML的可视化树(Visual Parent)概念。

简介

Item是QML中的基础控件，是QML中所有控件的父类。使用如下方式定义一个Item的对象。Item可以包含任何多个子对象，因此通过Item可以定义多层级的嵌套可视化树结构。

import QtQuick 2.0

Item {
    width: 100; height: 100

    Rectangle { width: 50;
                height: 50;
                color: "red" }
}

子对象

QML中的所有控件都继承于Item，因此所有的控件都可以包含子对象。如下的例子中Rectangle对象可以包含Image对象，Image对象可以包含多个Text对象。

Rectangle {
    color: "red"

    Image {
        anchors.fill: parent

        Text {
            text: qsTr("Hello, World")
            anchors.centerIn: parent
        }

        Text {
            text: qsTr("Hello, World2")
            anchors.bottom: parent.bottom
        }
    }
}

生命周期树

Item对象继承与QObject对象，因此具有QObject的树形生命周期管理能力：所有的父对象析构后，其管理的树形结构的所有子对象都会自动析构。
Item::data属性的类型是list，所有被添加到data list中的对象，Item都会将其QObject的parent自动设置为Item本身，即Item管理所有data中对象的生命周期。而上例中定义的Image对象会被自动加入到Rectangle::data 属性列表中。

可视化树

Item::children管理本身的可视化树，也是list类型。上例中的Image对象也会被自动加入到Rectangle::children属性列表中。

坐标系

所有子对象参考其直属父对象的坐标系，如下例所示：

Rectangle {
    width: 200
    height: 200
    color: "red"

    Rectangle {
        x: 100
        y: 100
        width: 100
        height: 100
        color: "blue"

        Rectangle {
            width: 50
            height: 50
            color: "green"
        }
    }
}

Z-Order

默认的，后出现的子对象覆盖在先前子对象的上面。你可以用z属性修改默认的Z-Order。

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"
    }
}

引用

[1] https://doc.qt.io/qt-5/qtquick-visualcanvas-visualparent.html
[2] https://doc.qt.io/qt-5/qtqml-syntax-basics.html
[3] https://doc.qt.io/qt-5/qtquick-visualcanvas-coordinates.html