QML_信号和槽

QML_信号和槽

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

Button{
    text: "quit"
    anchors.centerIn: parent
    onClicked: {   //按键自有的信号
        Qt.quit()
    }
}

2、对象本身或者其基类没有的属性和信号，需要通过外部（附加类型）提供，点击回车键窗口输出“哈哈哈”

Item {
    width: 100
    height: 100

    focus: true
    Keys.enabled: true
    Keys.onReturnPressed: {
        console.log("哈哈哈")
    }
}

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

/**********************例1***********************/
Rectangle{
        id:rect
        anchors.fill: parent
        color: "red"

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

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

/**********************例2***********************/
Rectangle {
    id: rect
    anchors.fill: parent
    color: "red"
}

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

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

4、自定义信号：
当QML现有的信号无法满足时，我们就需要自定义信号了。通过关键字signal来添加自定义的信号，在Qt c++中通过emit来发射信号，而在QML中直接将声明的信号当做函数来调用就可以触发了。所以我们继续在Rectangle对象中再定义一个按钮button，在其信号处理程序中直接调用定义的信号函数
注意：以下实例代码实现点击按钮五次，界面颜色即可更换

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    signal signal1
    //自定义无参信号
    signal signal2(string str, int value)
    //自定义有参数信号
    property int clickcount: 0 //自定义点击次数

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

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

    //定义有参信号
    onSignal1: {
        rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    }

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

5、信号与槽的连接
在QtWidgets中，信号与槽的连接方式使用的是QObject::connect()。相应的，在QtQuick中，signal对象也有一个connect()方法，用于将信号连接到一个或多个方法/信号。当信号连接到方法时，无论信号何时发出，该方法都将被自动调用。有了这种机制，可以通过方法来接收信号，而无需使用信号处理器。也可以通过disconnect()来取消连接
注意：点击按钮，字母全部由小写改为大写，窗口输出打印信息"变为大写了！！！"

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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)
            console.log("程序初始化开始")
        }
        //信号处理程序
        onSignal2: {
            console.log(str)
        }
        //定义方法
        function method1() {
            text1.text = "A"
        }

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

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