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

来源：互联网发布：centos ftp 根目录编辑：程序博客网时间：2024/06/05 13:32

ParentItem.qml：

import QtQuick 2.2import QtQuick.Dialogs 1.0import QtQuick.Controls 1.4import QtQuick.Window 2.2import QtQml 2.2import QtQml 2.2import QtQuick 2.7Rectangle {     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.2import QtQuick.Dialogs 1.0import QtQuick.Controls 1.4import QtQuick.Window 2.2import QtQml 2.2import QtQml 2.2import QtQuick 2.7Rectangle {    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.2import QtQuick.Dialogs 1.0import QtQuick.Controls 1.4import QtQuick.Window 2.2import QtQml 2.2import QtQml 2.2import QtQuick 2.7Rectangle {     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.2import QtQuick.Dialogs 1.0import QtQuick.Controls 1.4import QtQuick.Window 2.2import QtQml 2.2Rectangle{    //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);    }}

阅读全文

0 0