QML之使用Loader加载QML组件

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

盼望Meego火起来。

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

 

1、

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属性:

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元素可以接收到任何发送自加载组件的信号。

 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才能让事件不被传播到被加载组件。

 

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事件

 

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