Qt Quick 事件处理之信号与槽-2(代码备忘)

 1 import QtQuick 2.4
 2 import QtQuick.Controls 1.3
 3 
 4 Rectangle {
 5     width: 320;
 6     height: 240;
 7     color: "gray";
 8 
 9     Text {
10         id : textFirst;
11         anchors.horizontalCenter : parent.horizontalCenter ;
12         anchors.top : parent.top ;
13         anchors.topMargin : 20 ;
14         text : "first Text";
15         color : "orange";
16         font.pixelSize : 28;
17         onTextChanged : {
18           console.log(text);
19         }
20     }
21     
22     Text {
23        id : textSecond ;
24        anchors.horizontalCenter : parent.horizontalCenter ;
25        anchors.top : textFirst.bottom ;
26        anchors.topMargin : 8 ;
27        text : "second Text" ;
28        color : "blue";
29        font.pixelSize : 28 ;
30     }
31     
32     Button {
33        id : changeButton ;
34        anchors.top : textSecond.bottom ;
35        anchors.topMargin : 8 ;
36        anchors.horizontalCenter : parent.horizontalCenter ; 
37        text : "点击变化字体颜色" ;
38        onClicked : {
39          textFirst.text = "First " + Math.random();
40        }
41     }
42     
43     Image {
44         id : image1
45     }
46     
47     Connections {
48         target : changeButton ;
49         onClicked : {
50             textFirst.color = Qt.rgba(Math.random() , Math.random() , Math.random() , 1);
51             textSecond.color = Qt.rgba(Math.random() , Math.random() , Math.random() , 1);
52         }
53     }
54     
55     Component.onCompleted :{
56        console.log("QML Text‘s C++ type -",textFirst) ;
57        console.log("QML Button‘s C++ type - ",changeButton);
58        console.log("QML Image‘s C++ type - ",image1);
59     }    
60     
61 }

  1 import QtQuick 2.3
  2 import QtQuick.Controls 1.3
  3 
  4 Rectangle {
  5     width : 300 ;
  6     height: 240 ;
  7     color : "#C0C0C0" ;
  8     
  9     id : relay ;
 10     
 11     //定义一个信号槽
 12     signal messageReceived(string person,string notice);
 13     signal send();
 14     onSend : console.log("Send Clicked");
 15     
 16     Button{
 17        id : sendButton ;
 18        text : "Click me to send";
 19        anchors.top : colorText.bottom;
 20        anchors.topMargin : 8;
 21        anchors.horizontalCenter : parent.horizontalCenter;
 22        
 23     }
 24     
 25     Component.onCompleted:{
 26         //使用connect 连接多个方法
 27         relay.messageReceived.connect(sendToPost);
 28         relay.messageReceived.connect(sendToTelegraph);
 29         relay.messageReceived.connect(sendToEmail);
 30         relay.messageReceived("Tom","Happy Birthday");
 31         sendButton.clicked.connect(send);
 32     }
 33     
 34     function sendToPost(person,notice){
 35         console.log("Sending to post:" + person +","+notice);
 36     }
 37     
 38     function sendToTelegraph(person,notice){
 39         console.log("Sending to telegraph:" + person + " , " + notice);
 40     }
 41     
 42     function sendToEmail(person,notice){
 43         console.log("Sending to email:" + person + " , " + notice);
 44     }
 45     
 46     
 47     
 48     
 49     //最红变色的对象
 50     Text {
 51       id : colorText ;
 52       anchors.horizontalCenter : parent.horizontalCenter ;
 53       anchors.top : parent.top ;
 54       anchors.topMargin : 4 ;
 55       text : "Hello World";
 56       font.pixelSize : 32 ;
 57     }
 58     
 59     Component {
 60         id : colorComponent ;
 61         Rectangle{
 62           id : colorPicker;
 63           width : 50;
 64           height : 50;
 65           signal colorPicked(color clr) ; //自定义的colorPicked方法
 66           MouseArea {
 67             anchors.fill : parent;
 68             onPressed : colorPicker.colorPicked(colorPicker.color)
 69           }
 70         }
 71     }
 72     
 73     //动态创建一个红色的组件
 74     Loader{
 75       id : redLoader ;
 76       anchors.left : parent.left;
 77       anchors.leftMargin : 4 ;
 78       anchors.bottom : parent.bottom;
 79       anchors.bottomMargin : 4 ;
 80       sourceComponent : colorComponent ; //标明源组件
 81       onLoaded:{
 82         item.color = "red";
 83       }
 84     }
 85     
 86     //动态创建一个蓝色的组件
 87     Loader{
 88       id : blueLoader ;
 89       anchors.left : redLoader.right;
 90       anchors.leftMargin : 4 ;
 91       anchors.bottom : parent.bottom;
 92       anchors.bottomMargin : 4 ;
 93       sourceComponent : colorComponent ; //标明源组件
 94       onLoaded:{
 95         item.color = "blue";
 96       }
 97     }
 98     
 99     //红色组件的连接器
100     Connections {
101         target : redLoader.item;
102         onColorPicked :{
103            colorText.color = clr;
104         }
105     }
106     
107     //蓝色组件的连接器
108     Connections {
109         target : blueLoader.item ;
110         onColorPicked : {
111             colorText.color = clr;
112         }
113     }
114     
115 }