【QML 動态對象】Loader動态加載元件

Loader 元素用來動态加載可見的 QML 元件，它可以加載一個 QML 檔案（使用 source 屬性）或者一個元件對象（使用 sourceComponent 屬性）。

對于拖延元件的建立很是有用的：例如，當一個元件需要在要求的時候被建立，或者由于性能原因一個元件不應該被建立時。

Item {
    width: 200; height: 200
    
    Loader {
        id: pageLoader
        anchors.centerIn: parent
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "loginPage.qml" // 單擊加載“Page1.qml”作為一個元件
    }
}
           

原先視窗一片空白，點選才加載"登入頁面"，延時一會兒才居中顯示出來，延時時間即"登入頁面"的建立時間。

可以通過 item 屬性來通路被加載的項目，如果 source 或者s ourceComponent 更改了，任何先前執行個體化的項目都将被銷毀。

1、Loader的大小行為

Loader 和其他任何可見的頁面一樣，必須對其進行位置和大小的設定，這樣它才能成為可見的。

如果沒有明确指定 Loader 的大小，那麼 Loader 将會在元件加載完成後自動設定為元件的大小，如果通過設定 width 和 height 或者使用錨明确指定了 Loader 的大小和位置，那麼被加載的項目将會改變為 Loader 的大小。

2、用于切換頁面

下面的代碼就能在 Page1 和 Page2 之間切換了，這裡使用的是 source 屬性：

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

别忘了還能使用 sourceComponent 屬性：

QT開發交流+赀料君羊：714620761           

main.qml
--------------------------------------
import QtQuick 1.0

Item {
    property bool isFirst : false;
    width: 200
    height: 200

    Loader {
        id: pageLoader
        sourceComponent: defaultPage
    }

    MouseArea {
        anchors.fill: parent
        onClicked: changePage();
    }

    function changePage() {
        if(isFirst) {
            pageLoader.source = "Page1.qml"
        } else {
            pageLoader.source = "Page2.qml"
        }

        isFirst = !isFirst;
    }

    Component {
        id: defaultPage
        Rectangle {
            width: 200
            height: 50
            color: "red"
            Text {
                text: "Default Page"
                anchors.fill: parent
            }
        }
    }
}
           

上面的代碼實作了預設加載元件功能。

3、從加載的項目中接收信号

任何被加載的項目中發射的信号都可以使用 Connections 元素進行接收。

下面是 main.qml 加載了 MyItem，然後通過一個 Connections 對象來接收加載的項目的 message 信号。

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

因為 MyItem.qml 是在 Loader 的作用域中被加載的，是以可以直接調用在 Loader 或者其父項目中定義的任何函數。

4、焦點和鍵盤事件

Loader 是一個焦點作用域，對于它的任何獲得活動焦點的子項目都必須将 focus 屬性設定為 true。任何在被加載的項目中的鍵盤事件也應該被接收，進而使它們不傳播到 Loader。

如下面，main.qml 中的 MouseArea 單擊時會加載 Page2.qml，注意 Loader 中以及被加載的對象中都将 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 中。

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