1. 訊號處理器

QML中使用on+訊號的方式作為訊號處理器，來處理所所傳送的訊號。比如相應按鈕的點選事件，程式碼如下：

Button {
    text: '退出'
    anchors.centerIn: parent
    onClicked: {
        Qt.quit()
    }
}

clicked為點選按鈕所發出的訊號，與QPushButton發出的clicked訊號是相同的，而使用onClicked作為訊號的處理器，點選按鈕後，相應大括號({})中的語句，即Qt.quit()，程式退出。

2. 附加訊號處理器

QML語言的語法中，有一個附加屬性和附加訊號處理器的概念，這是附加到一個物件的額外屬性。下面是附加屬性和附加訊號處理器的簡單用法：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent
        Button {
            text: '退出'
            anchors.centerIn: parent
            onClicked: {
                Qt.quit
 
()
            }
        }

        Text {
            id: text
            text: ''
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Keys.enabled: true
        focus: true
        Keys.onPressed: {
            if
 
 (event.key === Qt.Key_Up)
                text.text = 'Has Pressed Up Key'
            else if (event.key === Qt.Key_Down)
                text.text = 'Has Pressed Down Key'
            else if (event.key === Qt.Key_Left)
                text.text = 'Has Pressed Left Key'
            else if (event.key === Qt.Key_Right)
                text.text = 'Has Pressed Right Key'
        }
    }
}

當按鍵盤的上、下、左、右按鍵時，顯示不同的字串。

3. Connections

Connections物件建立一個到QML訊號的連線。

• target: 指向發出訊號的物件。
• 使用on + 訊號的方式相應訊號處理。

Button {
    id: button
    text: '退出'
    anchors.centerIn: parent
}

Connections {
    target: button
    onClicked: {
        Qt.quit()
    }
}

這個效果同上面的實現。C++中定義的訊號，也可以使用Connections連線並處理訊號的相應。

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import Demos.SignalDeno 1.0

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent

        SignalDemo {
            id: signalDemo
        }

        ColumnLayout {
            anchors.centerIn: parent
            Text {
                id: text
                text: ''
            }

            Button {
                id: button
                text: '確定'

                onClicked: {
                    signalDemo.callTestSignal()
                }
            }

            Connections {
                target: signalDemo
                onTestSignal: {
                    text.text = 'Recved Test Signals'
                }
            }
        }
    }
}

C++中的標頭檔案：

#ifndef SIGNAL_DEMO_H
#define SIGNAL_DEMO_H
#include <QObject>

class SignalDemo : public QObject
{
    Q_OBJECT

public:
    SignalDemo(QObject *parent = nullptr);
    ~SignalDemo();

    // 呼叫訊號函式
    Q_INVOKABLE void callTestSignal(void);

signals:
    void testSignal(void);
};

#endif

C++中的原始檔：

#include "SignalDemo.h"

SignalDemo::SignalDemo(QObject *parent)
    :QObject(parent)
{

}

SignalDemo::~SignalDemo()
{

}

void SignalDemo::callTestSignal(void)
{
    emit testSignal();
}

4. 使用connect()函式連線訊號和槽

Qt C++中可以使用QObject::connect()的方式連線訊號和槽，QML中也有類似的方法，就是使用signal.connect()連線訊號和槽，當然也可以訊號連線訊號；有connect()方法當然也有disconnect()方法去斷開訊號和槽函式的連線。下面是使用signal.connect()改寫上面的訊號和槽的連線，可以達到相同的效果：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import Demos.SignalDeno 1.0

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Rectangle {
        anchors.fill: parent

        SignalDemo {
            id: signalDemo
        }

        ColumnLayout {
            anchors.centerIn: parent
            Text {
                id: text
                text: ''
            }

            Button {
                id: button
                text: '確定'

                onClicked: {
                    signalDemo.callTestSignal()
                }
            }

            function disposeTestSignal() {
                text.text = 'Recved Test Signals'
            }

            Component.onCompleted: {
                // 連線訊號和處理的槽函式
                signalDemo.testSignal.connect(disposeTestSignal)
            }

//            Connections {
//                target: signalDemo
//                onTestSignal: {
//                    text.text = 'Recved Test Signals'
//                }
//            }
        }
    }
}

5. 自定義訊號

使用QML的自定義訊號，可以使用如下形式：

signal name [type parameterName, …]

傳送訊號，可以直接使用函式即可；下面是一個簡單的示例：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Text {
        id: text
        text: 'This is Test Txt!'
        font.pixelSize: 35
        anchors.centerIn: parent

        function textColorChange(clr) {
            text.color = clr
        }

        Component.onCompleted: {
            button1.sendThisColor.connect(textColorChange)
            button2.sendThisColor.connect(textColorChange)
        }
    }

    Rectangle {
        id: button1
        width: 80
        height: 80
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        color: Qt.rgba(1.0, 0, 0)
        signal sendThisColor(color rectColor)

        MouseArea {
            anchors.fill: parent
            onClicked: {
                button1.sendThisColor(button1.color)
            }
        }
    }

    Rectangle {
        id: button2
        width: 80
        height: 80
        anchors.left: button1.right
        anchors.leftMargin: 5
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        color: Qt.rgba(0.0, 0.0, 1.0)
        signal sendThisColor(color rectColor)

        MouseArea {
            anchors.fill: parent
            onClicked: {
                button2.sendThisColor(button2.color)
            }
        }
    }
}

效果如下圖所示：