QML中的信号与槽

QML中信号与槽建立连接的五种方式

• 信号 与 信号处理器

• 属性变化信号 与 属性变化信号处理器

• 附加属性 与 附加信号处理器

• Connections 建立信号与槽的连接

• connect()方法 信号连接信号

1. 信号与信号处理器

格式：

signal()

on<Signal>: {}

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5 as Controls

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

    Controls.Button{
        text: "按钮"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        /*
            信号：clicked()
            信号处理器：onClicked: {}
        */
        onClicked: {
            console.log(text)
        }
    }

}

2. 属性变化信号与属性变化信号处理器

格式：

property

on<Property>Changed: {}

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5 as Controls

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

    Column{
        spacing: 10
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Controls.Button{
            text: "Click me"
            onClicked: {
                rec.color = Qt.rgba(Math.random(), Math.random(),Math.random(),1);
            }
        }

        Rectangle {
            id: rec
            color: "#00B000"
            width: 80; height: 80
            rotation: 90

            /*
                color: 是Rectangle的属性
                onColorChanged: {} Rectangle的属性变化信号处理器
            */
            onColorChanged: {
                console.log("Rectangle颜色改变了。")
            }
        }
    }

}

3. 附加属性与附加信号处理器

格式：

Attached Signal(附加属性)

XX元素.on<附加属性>: {}

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5 as Controls

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

    Rectangle {
        id: rec
        color: "#00B000"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 80; height: 80
        rotation: 90

        Component.onCompleted: {
            console.log("组件加载完成！");
        }
    }

}

4. Connections 建立信号与槽的连接

格式：

Connections {

 target: 发送者

 发送者信号处理器：{}

}

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5 as Controls

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Qml Study")

    Row{
        spacing: 10
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Controls.Button{
            id: btn
            text: "click"
        }
        Rectangle{
            id: rec
            width: 120; height: 60
            color: "red"
        }

        Connections{
            target: btn
            onClicked: {
                rec.color = "yellow"
            }
        }
    }

}

5. connect()方法 信号连接信号

格式：

元素对象.信号.connect(信号)

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5 as Controls

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Qml Study")

    property alias rec1Color: rec1.color
    property alias rec2Color: rec2.color

    Row{
        spacing: 10
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Rectangle{
            id: rec1
            width: 120; height: 60
            color: "red"
            //自定义信号
            signal sclicked();
            MouseArea{
                id: mouseArea1
                anchors.fill: parent;
            }

            Component.onCompleted: {
                //connect 信号连接信号
                mouseArea1.clicked.connect(sclicked);
            }
        }

        Rectangle{
            id: rec2
            width: 120; height: 60
            color: "#00B000"
            //自定义信号
            signal sclicked();
            MouseArea{
                id: mouseArea2
                anchors.fill: parent;
            }
            Component.onCompleted: {
                //connect 信号连接信号
                mouseArea2.clicked.connect(sclicked);
            }
        }

        Connections{
            target: rec1
            onSclicked: {
                rec2.color = "green";
                rec1.color = "blue";
            }
        }
        Connections{
            target: rec2
            onSclicked: {
                rec1.color = "green";
                rec2.color = "blue";
            }
        }
    }

}