import QtQuick 2.0  
import QtQuick.Controls 1.1  
  
Rectangle {  
    width: 320;  
    height: 240;  
    color: "#C0C0C0";  
      
    Text {  
        id: coloredText;  
        anchors.horizontalCenter: parent.horizontalCenter;  			//居中
        anchors.top: parent.top;  
        anchors.topMargin: 4;  
        text: "Hello World!";  
        font.pixelSize: 32;  
    }  

//Component：组件。相当于模块声明。只在实例生效。可以嵌入QML文件中，作为下文的声明，也可以单独写QML中，可以复用
    Component {  	//定义组件			
        id: colorComponent;  
        Rectangle {  	//组件为矩形框，在此内部定义信号
            id: colorPicker;  
            width: 50;  
            height: 30;  
            signal colorPicked(color clr);  //**定义信号colorPicked**括号内：参数类型 参数名
            MouseArea {  //为了触发信号，我给 Rectangle 引入了 MouseArea 。MouseArea 是专门处理鼠标操作的 item ，
                         //有一个onClicked信号
                anchors.fill: parent  	//填充整个矩形
                onPressed: colorPicker.colorPicked(colorPicker.color); //onPressed 槽连接：被点击后，
                                                      //发送colorPicked信号，信号携带参数为该块的颜色
            }  
        }  
    }  
      
//  Loader 是专门用来动态创建组件的，它可以从 qml 文件中创建组件，也可以指定 sourceComponent 来创建。
// 即Loader为Componet的实现，只有实现了的Component才可以显示
    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;  
        }  
    }  
}  

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


Window {
    visible: true
    width: 100;
    height: 100;

    Rectangle {
        id: forwarder;
        anchors.fill: parent
        signal send();		//定义一个send信号
        onSend: console.log("Send clicked");//当send信号产生时，打印日志

        MouseArea {
            id: mousearea;
            anchors.fill: parent;
            onClicked: 
console.log("MouseArea clicked");//点击时打印日志
        }

        Component.onCompleted: {//组件完成后
            mousearea.clicked.connect(send);	//链接信号槽
        }
    }
}