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

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

2024-11-22 04:34:02   202人阅读

个人学习的代码来处来自: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 : image145     }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       onl oaded:{ 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       onl oaded:{ 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 }

最终效果图是:

技术分享

 

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

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

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


联系
我们