呵呵,今晚是边看《裸婚时代》边敲代码,那电影看得...!钱真他妈不是个东西.
盼望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;
- }
- }