QML中的Component使用--自定义一个，然后使用它

QML中的Component使用--自定义一个，然后使用它

ParentItem.qml：

import QtQuick 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import QtQml 2.2
import QtQml 2.2
import QtQuick 2.7

Rectangle {
     id:id_parentItem;
     property alias shortext: id_text.text;
     property string longtext: id_text.text;//自定义的属性
     signal sig_click(string str);//自定义的信号
     //signal clicked
     width: 116; height: 26;
     color: "lightsteelblue";
     border.color: "red";

     Text{
         id:id_text;
         anchors.centerIn: parent;
         text:"Start";
     }

     MouseArea{
         anchors.fill: parent;
         onClicked:  {
             //console.log("id_parentItem-onClicked");
             id_parentItem.sig_click("from "+id_text.text);
             mouse.accepted=true;
             id_parentItem.focus=true
         }
     }

     function func_parent(a,b){
        return a+b;
     }

     Keys.onReturnPressed: {
         //console.log("Keys.onReturnPressed");
         var vret = func_parent("onReturnPressed:",id_text.text);
         id_parentItem.sig_click(vret);
         event.accepted=true;
     }
     Keys.onSpacePressed:  {
         id_parentItem.sig_click("onSpacePressed:"+id_text.text);
         event.accepted=true;
     }

     Button{
         id:id_btn1;
     }
     Timer{
         id:id_FocusScope1;
     }

     Component.onCompleted: {
         console.log(id_btn1);
         console.log(id_FocusScope1);
     }
  }

useItem.qml：

import QtQuick 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import QtQml 2.2
import QtQml 2.2
import QtQuick 2.7

Rectangle {
    id:id_rec
     visible: true; width: 400; height: 400;
     ParentItem{
         id:id_pItem1;
         anchors.left: parent.left;
         anchors.leftMargin: 3;
         shortext:"id_pItem1";
         onSig_click: {
             console.log("id_pItem1 接收到信号来自:"+"sig_click "+"信号参数为:"+str);
         }
     }
     ParentItem{
         id:id_pItem2;
         anchors.left: parent.left;
         anchors.leftMargin: 130;
         shortext:"id_pItem2";
         onSig_click: {
             console.log("id_pItem2 接收到信号来自:"+"sig_click "+"信号参数为:"+str);
         }
     }
     ParentItem{
         id:id_pItem3;
         anchors.left: parent.left;
         anchors.leftMargin: 260;
         shortext:"id_pItem3";
         onSig_click: {
             console.log("id_pItem3 接收到信号来自:"+"sig_click "+"信号参数为:"+str);
         }
     }

//     Item {
//           width: 100; height: 100

//           Component {
//               id: redSquare

//               Rectangle {
//                   color: "red"
//                   width: 10
//                   height: 10
//               }
//           }

//           Loader { sourceComponent: redSquare }
//           Loader { sourceComponent: redSquare; x: 20 }
//       }

     Component.onCompleted: {

//         console.log(cp3);
//         console.log(redSquare1);
     }

  }

Qt5.5.1 版本

下面是另外一个例子：

ColorPicker.qml：

import QtQuick 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import QtQml 2.2
import QtQml 2.2
import QtQuick 2.7

Rectangle {
     id:colorPicker;
     width: 50; height: 30;
     signal colorPicked(color clr);//自定义的信号
     //signal clicked

     function configureBorder(){
         colorPicker.border.width=colorPicker.focus?2:0;
         colorPicker.border.color=colorPicker.focus?"purple":"gray";
     }

     MouseArea{
         anchors.fill: parent;
         onClicked:  {
             colorPicker.colorPicked(colorPicker.color);
             mouse.accepted=true;
             colorPicker.focus=true;
         }
     }

     Keys.onReturnPressed: {
         colorPicker.colorPicked(colorPicker.color);
         mouse.accepted=true;
     }
     Keys.onSpacePressed:  {
         colorPicker.colorPicked(colorPicker.color);
         mouse.accepted=true;
     }
     onFocusChanged:   {
        configureBorder();
     }

     Component.onCompleted: {
         configureBorder();
     }

  }

test.qml：

import QtQuick 2.2
import QtQuick.Dialogs 1.0
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import QtQml 2.2

Rectangle{
    //id:root;
    visible: true;
    width: 320;
    height: 240;

    Text{
        id:coloredText;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 4;
        text:"Hello World!";
        font.pixelSize: 32;
    }
    function setTextColor(clr){
        coloredText.color=clr;
    }
    ColorPicker{
        id:redColor;
        color: "red";
        focus: true;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        KeyNavigation.right: blueColor;
        KeyNavigation.tab: blueColor;
        onColorPicked: {
            coloredText.color=clr;
        }
    }
    ColorPicker{
        id:blueColor;
        color: "blue";
        focus: true;
        anchors.left: redColor.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        KeyNavigation.left:  redColor;
        KeyNavigation.right: pinkColor;
        KeyNavigation.tab: pinkColor;
    }
    ColorPicker{
        id:pinkColor;
        color: "pink";
        focus: true;
        anchors.left:blueColor.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        KeyNavigation.left:  blueColor;
        KeyNavigation.tab: redColor;
    }
    Component.onCompleted: {
        blueColor.colorPicked.connect(setTextColor);
        pinkColor.colorPicked.connect(setTextColor);
    }
}