qml 信号与槽

信号是事件，信号通过信号处理程序来响应。当一个信号被发射时，相应的信号处理程序就会被调用，在处理程序中编写代码来使控件响应事件

信号处理程序

信号处理器

• 链接QML类型的已知信号，分为两类。一类是由用户输入产生，比如说按键、鼠标等；另一类是由对象的状态或者属性变化产生的，比如说鼠标被按下或释放等

每当按钮被点击时，onClicked处理程序就会被调用，此程序中设置退出应用

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 240
    height: 160
    title: qsTr("CheckBox")

    Button{
            text: "quit"
            anchors.centerIn: parent
            onClicked: {
                Qt.quit()
            }
        }

}

<AttachingType>.on<Signal>
<Signal>是信号的名称，首字母必须大写
我们在处理程序中编写想要实现的效果

on<Property>Changed
属性改变信号处理程序的用法
<Property>是属性的名称，首字母大写

都是放在当前元素的内部

附加信号处理器

对象本身或者其基类没有的属性和信号，需要通过外部（附加类型）提供

• 语法结构：

Item{
        width: 100
        height: 100

        focus: true
        Keys.enabled: true	//启用键盘处理
        Keys.onReturnPressed: console.log("哈哈哈")
    }

Connections

• 何时使用：
  将多个对象链接到同一个信号上
  在发出信号的作用域之外来建立连接
  发射信号的对象没有在QML中定义

• 实现的效果就是按下按钮，矩形的颜色变成绿色

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 240
    height: 160
    title: qsTr("CheckBox")

    Rectangle{
            id:rect
            anchors.fill: parent
            color: "blue"

            Button{
                id:button
                width: 100
                height: 30
                text: "改变颜色"
                anchors.centerIn: rect
            }

            Connections{
                target: button
                onClicked:{
                    rect.color = "green"
                }
            }
        }

}

自定义信号

• 关键字signal来添加自定义的信号,语法结构

signal <name>[([<type> <parameter name>[, ...]])]

• 自定义属性的方法语法结构
  [default] property <propertyType> <propertyName> : <value>

每次点击，点击次数都会累加且调用signal2函数，当点击次数增加到2时，同时调用siagnl1函数。既然定义了信号函数，必然会有信号处理函数。实现的效果是每次点击，都会输出现在点击的是第几次。当点击到第2和2的倍数次时，矩形的颜色随机改变

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 240
    height: 160
    title: qsTr("CheckBox")

    Rectangle{
            id: rect
            anchors.fill: parent
            color:"green"

            property int clickcount: 0   //自定义点击次数

            signal signal1    //自定义无参信号
            signal signal2(string str,int value)   //定义有参信号

            Button{
                    text: "点击我"
                    anchors.centerIn: rect
                    onClicked: {
                        rect.clickcount++
                        rect.signal2("点击第",rect.clickcount)
                        if(0 == rect.clickcount%2)
                        {
                            rect.signal1()
                        }
                    }
                }

            onSignal1: {
                rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
            }

            onSignal2: {
                console.log(str,value,"次")
            }
        }

}

QtQuick信号与槽的连接

connect()方法，用于将信号连接到一个或多个方法/信号。当信号连接到方法时，无论信号何时发出，该方法都将被自动调用。有了这种机制，可以通过方法来接收信号，而无需使用信号处理器。也可以通过disconnect()来取消连接

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 480
    height: 320
    title: qsTr("CheckBox")

    Rectangle{
            id: rect
            anchors.fill: parent
            //定义信号
            signal signal1(string str)
            signal signal2(string str)

            Row{
                id: row
                anchors.centerIn: rect
                Label{
                    id:text1
                    text: "a"
                    padding: 80

                }
                Label{
                    id: text2
                    text: "b"
                    padding: 80
                }
                Label{
                    id: text3
                    text: "c"
                    padding: 80
                }
            }

            Button{
                anchors.top: row.bottom
                anchors.horizontalCenter: rect.horizontalCenter
                text: "变成大写"
                onClicked: {
                    rect.signal1("变为大写了！！！")
                }
            }

            Component.onCompleted: {
                //连接到方法
                rect.signal1.connect(method1)
                rect.signal1.connect(method2)
                rect.signal1.connect(method3)
                //连接到信号
                rect.signal1.connect(rect.signal2)
            }
            //信号处理程序
            onSignal2: {
                console.log(str)
            }
            //定义方法
            function method1(){
                text1.text = "A"
            }

            function method2(){
                text2.text = "B"
            }

            function method3(){
                text3.text = "C"
            }
        }

}