QML 中神秘的 Component

QML 中神秘的 Component

Component 内部定义的 qmltype，其实相当于类定义，没有实例化，所以外部无法直接访问，看起来像是闭包，外部无法访问，但是 Component 内部可以访问外部变量。

在 ListView 中有个代理模式，其中最为重要的是名为 delegate 的属性。

通过设置 delegate 以不同的方式，展示数据项。你能发现 ListView::delegate 的接口类型为 Component，却不是 Item。

下面通过一些代码为你一一道出 Component 不为人知的秘密

Component 包裹对象的作用域

这里的作用域亦可是可被访问的范围。

import QtQuick 2.0

Item {
    //! [0]
    id: root
    
    Component {
        //! [1]
        id: com
        Text {
            //! [2]
            id: label
            text: "I am Text"
            //! [2]
        }
        //! [1]
    }
    
    Loader {
        anchors.fill: parent
        sourceComponent: com
    }
    //! [0]
}

如上诉代码，其中有三个可访问的标识符：root，com，label。root 在整个 0 是可以被访问的，com 访问域也是在整个 0 区。但是 label 只能在 2 区被访问。刚好被 1 给包裹了。

其实，label 就是作为 com 的模板对象（模板图元），可以在后续使用中，用来构造对应的对象。

Component 和 Loader 的配合

讲完之后。我们再来一次代码看一看。首先我们定义一个 Panel，如下：

//~ Panel.qml
import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    color: "transparent"
    border.color: "black"
    border.width: 1

    property Component label

    Loader {
        id: loader
        anchors.fill: parent
        anchors.margins: parent.width * 0.1
        sourceComponent: label
    }
}

这里的 Loader 会从 label 那里获取到一个模板图元，然后依据这个模板图元进行对象构建， Loader 作为父亲参数调用 label 的 object Component::createObject(Item parent, object properties) 函数，返回的对象设置给 Loader::item 属性。

当 Loader::sourceComponent 改变的时候，他会先销毁之前的根据 label 构建的对象，然后再重新构建新对象，设置到 Loader::item。

下面是 Loader::setSourceComponent(Component c) 的 c++ 伪码：

void Loader::setSourceComponent(Component c)
{
    if(this.sourceComponent != c) {
        if(this.item != null) {
            this.item.deleteLater();
            this.item = null;
        }
        this.sourceComponent = c;
        emit this.sourceComponentChanged();             // 信号触发后，就构建新的对象到 this.item
    }
}

Compoent 的自动装箱

测试代码如下：

import QtQuick 2.5

Item {
    width: 640
    height: 360

    Row {
        anchors.fill: parent

        Panel {
            id: panel1
            label: Component {
                id: greenCom
                Rectangle {
                    color: "green"
                    Component.onDestruction: {
                        console.log("Green Rectangle Destruction")
                    }
                }
            }
        }

        Panel {
            id: panel2
            label: Rectangle { color: "red" }
        }
    }
    Component {
        id: yellowCom
        Rectangle {
            color: "yellow"
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            panel1.label = yellowCom;
            if(time == 0) {
                console.log("set cache only once")
                cache = panel2.label;
            }
            panel2.label = yellowCom;
            ++time;
            console.log(cache, cache.progress)
        }
    }

    property int time: 0
    property var cache

    Component.onCompleted: {
        console.log(panel2.label)
    }
}

其中 panel2 的 lable 参数不是 Component，但是 Qt 会为其构建一个 Component 进行自动封装（不是类型转换，类似 Java 的装箱）。

当你修改 panel2 的 lable 属性时，跟前面所说的一样，旧的对象会被销毁，并被新的对象替代。同理，panel1 也是。

因为自动装箱而产生的 Component 回收情况

你会注意到，panel2 之前自动产生 label 对象保存在 cache 中，并没有被销毁（访问 progress 不报空指针异常）。也就是装箱产生的封装类，不会被马上回收。

由于是 Qt 自动生成的，所以其对象所有权应该属于 QmlEngine，在满足一些条件时会被自动回收。可以尝试使用 ObjectOwnership QQmlEngine::objectOwnership(QObject * object) 查询对象的所有权，这里没有进行测试，有空再说啦~