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