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