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