信号和槽--QT动画制作（十三）

alltolove

效果：

能学到这里的鱼油已经很厉害了，学编程时枯燥的，但是枯燥过后迎来的是喜悦
知识点1：学会使用信号与槽的两种方法
知识点2：学会使用按钮控件
知识点3：文本输入框
还是先新建个QT项目，再建个Rect.qml文件，代码如下：

1. import QtQuick 2.0
   
2. import QtQuick.Controls 1.3//这里包含按钮等各种控件
   
3. Rectangle {
   
4.     id:rect
   
5.     width:400
   
6.     height:400
   
7.     color:"green"
   
8.     Row{
   
9. 
   
10.     Button{
    
11.         id:btn
    
12.         text:"点我"
    
13.     }
    
14.     Button{
    
15. 
    
16.         id:btn1
    
17.         text:"背景变为红色"
    
18.     }
    
19.     }
    
20. Rectangle{
    
21.     anchors.centerIn: parent
    
22.     width:100
    
23.     height: 20
    
24. TextInput{
    
25.     focus:true//光标自动进入文本框
    
26.     id:input
    
27.     width:100
    
28.     height: 30
    
29. }
    
30. }
    
31.     function a(){//js脚本的函数
    
32.         btn.text=input.text
    
33.     }
    
34.     function b(){
    
35.         rect.color="red"
    
36.     }
    
37.     Component.onCompleted: {
    
38.         btn.clicked.connect(a)//点我按钮点击后触发a（）函数
    
39.     }
    
40.     Connections{
    
41.         target:btn1//设定信号来自于哪
    
42.         onClicked:b()
    
43.     }
    
44. }
    

复制代码

main.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Window 2.2
   
3. 
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     title: qsTr("Hello World")
   
9. 
   
10.     MainForm {
    
11.         anchors.fill: parent
    
12. 
    
13.     }
    
14. }

复制代码

MainForm.ui.qml文件：

1. import QtQuick 2.5
   
2. Rect{}
   

复制代码

preview: 明天我们将介绍控件中滑动条的使用，和另外一项图片渲染技巧