QML之動態加載

使用Loader動態加載組件

QML中的Loader可用來動態加載QML組件，動態加載的作用:
1. 在需要使用該組件的時候才加載它（並不像visible屬性會使控件一直存在）；
2. 加載的組件可以銷燬並釋放資源。

QML中控件的visible屬性類似於widget中窗口的close效果，頁面只是被隱藏了並沒有銷燬釋放內存。Loader可以通過設置source屬性爲空字符串或者sourceComponent屬性爲undefined來銷燬組件釋放資源，source屬性加載的是.qml文件（“xxx.qml”），sourceComponent屬性加載的是組件（Component）。

使用createObject()動態創建對象

使用createObject()創建對象需要一個Component，可以是當前文件中的Component，也可以是使用Qt.createComponent(xxx.qml)創建的Component。

效果

代碼

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.5

Window {
    id: root
    visible: true
    width: 1200
    height: 480
    title: qsTr("Hello World")

    /******************visible******************/
    Rectangle {
        id: rect1
        x: 24
        y: 110
        width: 368
        height: 346
        color: "#ffffff"
        MyComponent{
            id: myComponent
            visible: false
            onCloseBtnClicked: {
                myComponent.visible = false
            }
        }
    }
    Button {
        id: button1
        x: 162
        y: 48
        text: qsTr("load1")
        onClicked: {
            myComponent.visible = true
            myComponent.changeBtnNum(1)
        }
    }

    /******************Loader******************/
    Rectangle {
        id: rect2
        x: 416
        y: 110
        width: 368
        height: 346
        color: "#ffffff"
        Loader{
            id: myLoader
        }
    }
    Button {
        id: button2
        x: 545
        y: 48
        text: qsTr("load2")
        onClicked: {
            myLoader.source = "MyComponent.qml"
            myLoader.item.changeBtnNum(2)
        }
    }
    Connections{
        target: myLoader.item     //指向組件的頂層item
        onCloseBtnClicked:{
            myLoader.source = ""
        }
    }

    /******************createComponent******************/
    Rectangle {
        id: rect3
        x: 804
        y: 110
        width: 368
        height: 346
        color: "#ffffff"
    }
    Button {
        id: button3
        x: 942
        y: 48
        text: qsTr("load3")
        onClicked: {
            creatPopRect()
        }
    }
    property Component myComponent: null

    function creatPopRect()
    {
        if(root.myComponent === null)
        {
            root.myComponent = Qt.createComponent("MyComponent.qml")
        }

        var obj
        if(root.myComponent.status === Component.Ready)
        {
            obj = root.myComponent.createObject(rect3, {"x": 0, "y": 0})
            obj.changeBtnNum(3)
        }
    }

}

MyComponent.qml

import QtQuick 2.0
import QtQuick.Controls 1.5

Rectangle {
    id: root
    width: 368
    height: 346
    color: "#87C056"
    border.width: 2
    opacity: 0.9
    radius: 8

    signal closeBtnClicked()

    property int btnNum: 0

    Rectangle{
        width: 364
        height: 2
        anchors.top: parent.top
        anchors.topMargin: 40
        anchors.left: parent.left
        anchors.leftMargin: 2
        radius: 8
    }
    Text {
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 10
        text: qsTr("loadPage")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    TextArea {
        id: textArea1
        x: 38
        y: 92
        width: 292
        height: 123
    }

    Button {
        id: button1
        x: 138
        y: 280
        text: qsTr("close")
        onClicked: {                    
            if(btnNum === 3)
            {
                //使用creatComponent方式創建時使用destroy()函數銷燬
                root.destroy(100)
            }
            else
            {
                root.closeBtnClicked()
            }
        }
    }

    function changeBtnNum(num)
    {
        btnNum = num
    }
}