QT Quick QML入门笔记（二）信号与槽

---

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

QML其它文章请点击这里:     QT QUICK QML 学习笔记

---

姊妹篇:    

● QT Quick QML入门笔记（一）应用程序结构分析和QML基础

● QT Quick QML入门笔记（三）常见元素

● QT Quick QML入门笔记（四）锚(anchors)布局

● QT Quick QML入门笔记（五）处理鼠标和键盘事件

---

1. 信号与槽

介绍两种信号与槽的触发
①、控件或元素，触发一个信号，比如按键触发(视频中暂未介绍实例)

②、对象属性发生改变，比如window的宽高发生变化
新建 “signalslot.qml”文件：

//对象属性发生改变的实例
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id:win;
    visible:  true;
    width: 400;
    height: 200;
    color: "white"

    Text {
        id:txt;
        text: "Center Text";
        font.pointSize: 18;
        color: "red";
    }

    //信号处理器，代码块的形式：
    //on<Property>Changed 或 on<Signal>
    onWidthChanged: {
        txt.x = (win.width - txt.x)/2;
    }

    //信号处理器，函数方法的形式：
    //on<Property>Changed 或 on<Signal>
    onHeightChanged: heightChanged();
    function heightChanged(){
        txt.y = (win.height - txt.y)/2;
    }
}

当在“ onWidthChanged: {” 中输入 onW的时候就自动补全了

输入指令：

运行结果：

调整界面大小，文字宽高始终在中间。

2. 信号与槽的连接

直接上例子：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id:win;
    visible:  true;
    width: 400;
    height: 200;
    color: "white"

    Button {
        x:0;
        y:0;
        id:btn;
        text:"btn";
    }

    function btnClick() {
        btn.text = "btnClicked";
    }

    //方法1：connect
    Component.onCompleted: {
        btn.clicked.connect(btnClick);  
    }

    //方法2：Connections 
    Connections {
        target: btn;
        onClicked: btnClick();
    }
}

● 方法1：connect
Component.onCompleted:{
	xxx.clicked.connect(doSomething);
}
//题外话：Component.onCompleted 一般用作初始化函数

● 方法2：Connections
 Connections {
 		target： xxx；                        //发出信号的对象
 		on<Signal>： function or code block   //"on<Signal>："是 xxx的信息。 
}
//好处
//1.一个target，多个槽，实现一对多的关系
//2.信号与槽连接的地方放到其他地方

输入指令：

运行结果：
使用方法1和方法2都是一样的：

按键按键后：文字改变

---

QML其它文章请点击这里:     QT QUICK QML 学习笔记