QML动态加载组件

QML中的组件可以重复使用，并且可以通过Loader加载。如下示例：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

Rectangle{
    id: root
      512
    height: 512
    color: "gray"

    Text {
        id: coloredText
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20

        text: "Hello World"
        color: "blue"
        font.pointSize: 30
    }

    Component {
        id: colorComponent
        Rectangle {
            id: colorPicker
             50
            height: 30

            signal colorPicked(color clr);

            MouseArea {
                anchors.fill: parent
                onPressed: colorPicker.colorPicked(colorPicker.color);
            }
        }
    }

    Loader {
        id: redLoader
        anchors.left: parent.left
        anchors.leftMargin: 4
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 4

        sourceComponent: colorComponent
        onLoaded: {
            item.color = "red"
        }
    }

    Loader {
        id: blueLoader
        anchors.left: redLoader.right
        anchors.leftMargin: 4
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 4

        sourceComponent: colorComponent
        onLoaded: {
            item.color = "blue"
        }
    }

    Connections {
        target: redLoader.item
        onColorPicked: {
            coloredText.color = clr
        }
    }

    Connections {
        target: blueLoader.item
        onColorPicked: {
            coloredText.color = clr
        }
    }
}