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

}