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

个人学习的代码来处来自:http://blog.csdn.net/foruok/article/details/30028711

1.  hello_world.qml

主要的功能是:

1. 是点击按钮，两个文本的颜色会随机变化，并输出"textFirst"的文本内容

2. 输出Text , Button , Image 三个对象的C++原型

 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 }

最终效果图是:

2. my_signal.qml

主要的功能是:

1. 点击左下方的两个方块，会改变"Hello World"字体的颜色
2. 在运行my_signal.qml时，会发送消息(messageReceived)
3. 点击按钮，会执行按钮绑定的自定义的send()方法

  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 }

最终效果图是:

今天的学习暂时到这了，晚安，安~~

座右铭 : 人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。