QML之使用Loader加载QML组件

呵呵，今晚是边看《裸婚时代》边敲代码，那电影看得...！钱真他妈不是个东西.

盼望Meego火起来。

QML的Loader元素经常备用来动态加载QML组件。可以使用source属性或者sourceComponent属性加载。这个元素最有用的地方是它能在qml组件需要的时候再创建，即延迟创建QML的时间。

1、

[css] view plain copy

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"

}

}

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

[css] view plain copy

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

}

}

}

}

上面的代码实现了默认加载组件功能.

3、接收来自加载的qml发出的信号

使用Connections元素可以接收到任何发送自加载组件的信号。

[css] view plain copy

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

}

}

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

[css] view plain copy

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和Page2.qml都会接收到按键事件，也就是说按键事件会传播到main.qml中

5、Loader的 onStatusChanged和onLoaded事件

[css] view plain copy

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;

}

}