×
Namespaces

Variants
Actions

使用QML loader 元素动态创建加载QML组件以提高程序性能

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Created: liuting (29 Feb 2012)
Last edited: renlin (11 Jul 2012)

Contents

介绍

Loader元素用来动态加载可见的QML组件。它可以用来加载一个QML文件(使用source属性),也可以用来加载一个组件(Component)对象(使用sourceComponent属性)。这个元素最有用的地方是它能在qml组件需要的时候再创建,即延迟创建QML的时间,提高程序的性能

代码实现

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

上面的代码就能界面在Page1和Page2之间切换了,别忘了还能使用sourceComponent属性

    main.qml  
--------------------------------------
import QtQuick 1.0
 
Item {
property bool isFirst : false;
width: 200
height: 200
 
Loader {
id: pageLoader
sourceComponent: rect
}
 
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
}
}
}
}

已经加载的item可以通过item属性来访问。Loader与其他可见item一样,需要设置位置的大小才可见。一旦组件被加载,Loader会自动设置组件的大小。当source或是sourceComponent属性发生变化时,之前加载的item都会被销毁,将source或是sourceComponent属性设置成空字符串可以销毁当前已经加载的item,释放Loder所占用的资源,接下来我们将演示如何从加载的ITEM中接受信号

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!");
}
}

最后我们来看下如何是loader的子ITEM获得焦点,Loader是一个焦点区域,如果想让Loader的子item获得活动的焦点,必须将Loader的focus属性设置为真。Loader中加载的组件应该接受任何收到的键盘事件,这样键盘事件就不会抛给Loader处理。在下面的例子中,当单击MouseAre时,aapplication.qml加载KeyReader.qml文件。注意Loader的focus属性和KeyReader.qml中 的item的focus属性均设置为真

KeyReader.qml:
import Qt 4.7
 
Item {
Item {
focus: true
Keys.onPressed: {
console.log("Loaded item captured:", event.text);
event.accepted = true;
}
}
}
 
application.qml:
import Qt 4.7
 
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被加载,它会接受所有的键盘事件,将event.accepted属性设置为真,这样事件就不会上抛给Rectangle处理。

代码下载

media:LoaderTest.zip

相关链接


Add categories below. Remove Category:Draft when the page is complete or near complete

This page was last modified on 11 July 2012, at 06:19.
256 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×