×
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.
113 page views in the last 30 days.