使用Loader动态加载组件

使用Loader动态加载组件

https://blog.csdn.net/u012419303/article/details/45568545

https://blog.csdn.net/u012419303/category_3138565.html

 

Loader元素用来动态加载可见的QML组件，它可以加载一个QML文件（使用source属性）或者一个组件对象（使用sourceComponent属性）。

对于拖延组件的创建很是有用的：例如，当一个组件需要在要求的时候被创建，或者由于性能原因一个组件不应该被创建时。

 

Item {
    width: 200; height: 200
    Loader {id: pageLoader}
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page1.qml"<span style="white-space:pre">	</span>//单击加载“Page1.qml”作为一个组件
    }
}

可以通过item属性来访问被加载的项目，如果source或者sourceComponent更改了，任何先前实例化的项目都将被销毁。

 

将source设置为空字符串或者sourceComponent设置为undefined，则销毁当前加载的项目，释放资源，并将Loader设置为空。

1. Loader的大小行为

Loader和其他任何可见的项目一样，必须对其进行位置和大小的设置，这样它才能成为可见的。

如果没有明确指定Loader的大小，那么Loader将会在组件加载完成后自动设置为组件的大小，如果通过设置width和height或者使用锚明确指定了Loader的大小，那么被加载的项目将会改变为Loader的大小

2. 从加载的项目中接收信号

任何被加载的项目中发射的信号都可以使用Connections元素进行接收。

下面是application.qml加载了MyItem，然后通过一个Connections对象来接收加载的项目的message信号。

application.qml的内容：

 

import QtQuick 2.4

Item {
    width: 100; height: 100
    Loader {
        id: myLoader
        source: "MyItem.qml"
    }
    Connections {
        target: myLoader.item
        onMessage: console.log(msg)
    }
}

MyItem.qml文件的内容

 

 

import QtQuick 2.0

Rectangle {
    id: myItem
    signal message(string msg)
    width: 100; height: 100
    MouseArea {
        anchors.fill: parent
        onClicked: myItem.message("clicked!")
    }
}

因为MyItem.qml是在Loader的作用域中被加载的，所以可以直接调用在Loader或者其父项目中定义的任何函数。

 

3. 焦点和键盘事件

Loader是一个焦点作用域，对于它的任何获得活动焦点的子项目都必须将focus属性设置为true。任何在被加载的项目中的键盘事件也应该被接收，从而使它们不传播到Loader。

如下面，application.qml中的MouseArea单击时会加载KeyReader.qml，注意Loader中以及被加载的对象中都将focus属性设置为了true。

application.qml的内容：

 

import QtQuick 2.4

Rectangle {
    width: 200; height:200
    Loader {
        id: loader
        focus: true
    }
    MouseArea {
        anchors.fill: parent
        onClicked: loader.source = "KeyReader.qml"
    }
    Keys.onPressed: {
        console.log("Captured: ", event.text);
    }
}

KeyReader.qml内容

 

 

import QtQuick 2.0

Item {
    Item {
        focus: true
        Keys.onPressed: {
            console.log("Loaded item captured: ", event.text)
            event.accepted = true
        }
    }
}

一旦KeyReader.qml被加载完成，它便会接收键盘事件而且这里讲event.accepted设置为了true，这样事件就不会传播到父项目Rectangle中。

 

=============== End