QML-Component

1、概念

• Component只能包含一个顶层的Item，而且在这个Item之外不能定义任何的数据，除了Id。

• Component通常用来给一个View提供图形化组件。

• Component不是Item的派生类，而是从QQmlComponent继承而来的，虽然它通过自己的顶层Item为其他的View提供可视化组件，但它本身不是可见元素。

2、Component.onCompleted，初始化函数

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

在对象初始化之后会发送completed信号

3、公共属性封装

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

将一些属性打包，方便调用

4、Component.onDestruction，析构函数

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

5、作为组件使用，类似于定一个按钮的模板，然后多个地方加载

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