Component

1、Component.onCompleted，初始化函數

Rectangle {
      Component.onCompleted: console.log("Completed Running!")
      Rectangle {
          Component.onCompleted: console.log("Nested Completed Running!")
      }
  }

在對象初始化之后會發送completed信號

2、公共屬性封裝

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
Rectangle{
    width:300;
    height:200;
    Component{
    id:btnStyle;
    ButtonStyle{
        background:Rectangle{
            implicitWidth:70;
            implicitHeight:25;
            color:"#DDDDDD";
            border.width:control.pressed?2:1;
            border.color:(control.hovered||control.pressed)?"green":"#888888";
            }
        }
    }
    Button{
    
        style:btnStyle;
    }
}

將一些屬性打包，方便調用

3、Component.onDestruction，析構函數

Rectangle {
      Component.oDestruction: console.log("Completed quit!")
  }

 4、作為組件使用，類似於定一個按鈕的模板，然后多個地方加載

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Component{//注意Component里只能有一個頂層Item，除了這個Item之外只能定義id，其他都不能定義
        id:btnComponent;
        Rectangle{
            id:colorPicker;
            width: 50;
            height: 30;
        }
    }

    Loader{
        id:loader1;
        anchors.centerIn: parent;
        sourceComponent: btnComponent;
        onLoaded: {
            item.color = "red";
        }
    }
}