【QML 动态对象】Loader动态加载组件
Loader 元素用来动态加载可见的 QML 组件，它可以加载一个 QML 文件（使用 source 属性）或者一个组件对象（使用 sourceComponent 属性）。
对于拖延组件的创建很是有用的：例如，当一个组件需要在要求的时候被创建，或者由于性能原因一个组件不应该被创建时。
Item {
width: 200; height: 200
Loader {
id: pageLoader
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: pageLoader.source = "loginPage.qml" // 单击加载“Page1.qml”作为一个组件
}
}
原先窗口一片空白，点击才加载"登录页面"，延时一会儿才居中显示出来，延时时间即"登录页面"的创建时间。
可以通过 item 属性来访问被加载的项目，如果 source 或者s ourceComponent 更改了，任何先前实例化的项目都将被销毁。
一、Loader的大小行为
Loader 和其他任何可见的页面一样，必须对其进行位置和大小的设置，这样它才能成为可见的。
如果没有明确指定 Loader 的大小，那么 Loader 将会在组件加载完成后自动设置为组件的大小，如果通过设置 width 和 height 或者使用锚明确指定了 Loader 的大小和位置，那么被加载的项目将会改变为 Loader 的大小。
二、用于切换页面
下面的代码就能在 Page1 和 Page2 之间切换了，这里使用的是 source 属性：
main.qml
------------------------------------
import QtQuick 1.0
Item {
property bool isFirst : false;
width: 200
height: 200
Loader {
id: pageLoader
}
MouseArea {
anchors.fill: parent
onClicked: changePage();
}
function changePage() {
if(isFirst) {
pageLoader.source = "Page1.qml"
} else {
pageLoader.source = "Page2.qml"
}
isFirst = !isFirst;
}
}
Page1.qml
-------------------------------------
import QtQuick 1.0
Rectangle {
width: 100
height: 62
Text {
anchors.centerIn: parent
text: "Page1 Test"
}
}
Page2.qml
---------------------------------------
import QtQuick 1.0
Rectangle {
width: 100
height: 62
Text {
anchors.centerIn: parent
text: "Page1 Test"
}
}
别忘了还能使用 sourceComponent 属性：
main.qml
--------------------------------------
import QtQuick 1.0
Item {
property bool isFirst : false;
width: 200
height: 200
Loader {
id: pageLoader
sourceComponent: defaultPage
}
MouseArea {
anchors.fill: parent
onClicked: changePage();
}
function changePage() {
if(isFirst) {
pageLoader.source = "Page1.qml"
} else {
pageLoader.source = "Page2.qml"
}
isFirst = !isFirst;
}
Component {
id: defaultPage
Rectangle {
width: 200
height: 50
color: "red"
Text {
text: "Default Page"
anchors.fill: parent
}
}
}
}
上面的代码实现了默认加载组件功能。
三、从加载的项目中接收信号
任何被加载的项目中发射的信号都可以使用 Connections 元素进行接收。
下面是 main.qml 加载了 MyItem，然后通过一个 Connections 对象来接收加载的项目的 message 信号。
main.qml
---------------------------------------
import QtQuick 1.0
Item {
property bool isFirst : false;
width: 200
height: 200
Loader {
id: pageLoader
source: "Page1.qml"
}
Connections {
target: pageLoader.item
onMessage: console.log(msg);
}
}
Page1.qml
----------------------------------------------
import QtQuick 1.0
Rectangle {
id: myItem
signal message(string msg)
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: myItem.message("clicked!");
}
}
因为 MyItem.qml 是在 Loader 的作用域中被加载的，所以可以直接调用在 Loader 或者其父项目中定义的任何函数。
四、焦点和键盘事件
Loader 是一个焦点作用域，对于它的任何获得活动焦点的子项目都必须将 focus 属性设置为 true。任何在被加载的项目中的键盘事件也应该被接收，从而使它们不传播到 Loader。
如下面，main.qml 中的 MouseArea 单击时会加载 Page2.qml，注意 Loader 中以及被加载的对象中都将 focus 属性设置为了 true。
main.qml
-------------------------------------
import QtQuick 1.0
Item {
property bool isFirst : false;
width: 200
height: 200
Loader {
id: pageLoader
source: "Page2.qml"
focus: true
}
Keys.onPressed: {
console.log("Captured: ", event.text);
event.accepted = true;
}
}
Page2.qml
---------------------------------
import QtQuick 1.0
Rectangle {
width: 100
height: 62
Text {
anchors.centerIn: parent
text: "Page2 Test"
}
focus: true
Keys.onPressed: {
console.log("Loaded item captured: ", event.text);
event.accepted = true;
}
}
一旦 Page2.qml 被加载完成，它便会接收键盘事件，而且这里将 event.accepted 设置为了 true，这样事件就不会传播到父项目 main.qml 中。
五、onStatusChanged和onLoaded事件
main.qml
-------------------------------------
import QtQuick 1.0
Item {
property bool isFirst : false;
width: 200
height: 200
Loader {
id: pageLoader
source: "Page2.qml"
focus: true
onStatusChanged: console.log(pageLoader.status == Loader.Ready)
onLoaded: console.log("Loaded")
}
MouseArea {
anchors.fill: parent
onClicked: changePage();
}
function changePage() {
if(isFirst) {
pageLoader.source = "Page1.qml"
} else {
pageLoader.source = "Page2.qml"
}
isFirst = !isFirst;
}
Component {
id: rect
Rectangle {
width: 200
height: 50
color: "red"
Text {
text: "Default Page"
anchors.fill: parent
}
}
}
Keys.onPressed: {
console.log("Captured: ", event.text);
event.accepted = true;
}
}
参考：
