标签:
个人学习的代码来处来自: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 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 }
最终效果图是:
今天的学习暂时到这了,晚安,安~~
座右铭 : 人性最可怜的就是:我们总是梦想着天边的一座奇妙的玫瑰园,而不去欣赏今天就开在我们窗口的玫瑰。
标签:
原文地址:http://www.cnblogs.com/fsong/p/4261342.html