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

 

 

转载于:https://www.cnblogs.com/judes/p/9405318.html