QML Loader 使用注意事项

QML 的 Loader 元素经常被用来动态加载 QML 组件。可以使用 source 属性或者 sourceComponent 属性加载。

这个元素最有用的地方是它能在 qml 组件需要的时候再创建，即延迟创建 qml 的控件，提高运行速度。

加载与被加载组件中都有相同的事件，那么需要设置 Loader 的属性 focus 为 true，且设置被加载组件 focus: true 才能让被加载组件捕获事件。

测试示例：

// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: rootPage
        anchors.fill: parent
        property bool isFirst : false

        Loader {
            id: pageLoader
            source: "CPage.qml"
            onLoaded: {
                rootPage.focus = false
                pageLoader.forceActiveFocus()
            }
        }

        Keys.onPressed: {
            console.log("Captured: ", event.text)
        }
    }
}

// CPage.qml
import QtQuick 2.12

Rectangle {
    width: 100
    height: 62
    focus: true
    Text {
        anchors.centerIn: parent
        text: "CPage Test"
    }
    Keys.onPressed: {
        console.log("Loaded item captured: ", event.text)
    }
}

Loader 使用注意事项：

1. 如果 source 或者 sourceComponent 更改了，任何先前实例化的项目都将被自动销毁
2. 将 source 设置为空字符串或者 sourceComponent 设置为 undefined，则销毁当前加载的项目，释放资源，并将 Loader 设置为空
3. Loader 出来的 qml 界面，在界面关闭时，一定要清空 Loader 资源