QML信号与信号槽实践指南：轻松掌握现代软件开发的关键技术（二）-阿里云开发者社区

QML信号与信号槽实践指南：轻松掌握现代软件开发的关键技术（一）https://developer.aliyun.com/article/1464209

（五）QML信号槽的连接与应用

5.1 在QML中创建槽

在 QML 中，槽（Slot）是一种特殊的 JavaScript 函数，用于处理信号。当信号与槽相连接时，每当信号被触发，该槽就会自动执行。

要在 QML 中创建一个槽，我们只需要定义一个普通的 JavaScript 函数，并将其作为组件的属性。例如：

import QtQuick 2.15

Rectangle {
    id: rect
    width: 100; height: 50
    color: "red"

    function handleSignal(param) {
        console.log("Signal received with parameter:", param)
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect.handleSignal("Hello")
        }
    }   
}

在上述示例中，我们首先定义了一个名为 handleSignal 的函数，它接受一个参数 param。然后，在矩形下方的 MouseArea 组件的 onClicked 处理器中调用了这个函数，传递了一个字符串 "Hello"作为参数。缺点是此函数没有直接和signal绑定。

5.2 使用槽处理信号

在QML中，您可以将信号连接到属性或者函数（称为槽），这些槽用来响应发送的信号。当接收到信号时，槽会被自动执行。

以下是一个简单示例，展示了如何使用槽处理信号：

首先，创建一个新的QML文件名为MySignal.qml，定义一个带有自定义信号的矩形：

import QtQuick 2.0

Rectangle {
    id: rect
    width: 200; height: 100
    color: "red"

    signal mySignal(string msg)
}

然后，在主QML文件中，我们要实例化 MySignal.qml 并将其mySignal信号与一个槽关联起来。在下面的代码中，我们把信号连接到了一个匿名的JavaScript 函数作为槽。当点击 redRectangle 时，mySignal 将触发，并执行onClick槽函数。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Signals and Slots Example")

    MySignal {
        id: redRectangle
        anchors.centerIn: parent
        
        // Defining the onClicked slot function
        onClicked: function(msg) {
            console.log("Signal received: ", msg);
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            redRectangle.mySignal("Hello from mySignal!")
        }
    }
}

在这个示例中，我们连接了一个名为onClicked的匿名槽函数到 mySignal.qml 中定义的 mySignal 信号。然后当用户点击屏幕时, mySignal 被触发，并传递消息 “Hello from mySignal!” 给响应信号的槽函数，因此控制台将输出以下内容：

qml: Signal received: Hello from mySignal!

以上就是如何在QML中处理自定义信号与使用槽函数。

5.3 连接和断开信号与槽

在QML中，我们可以使用 Connections 元素来连接和断开信号与槽。

连接信号与槽

要在qml中使用 Connections 来自定义一个对象的行为，我们需要将 Connections 的 target 设置为对应的对象。接下来，在 Connections 内部创建匹配的 on 脚本语句以处理相关事件。示例代码如下：

import QtQuick 2.0

Rectangle {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Mouse area clicked")
    }

    Connections {
        target: mouseArea
        onClicked: console.log("Connected to signal")
    }
}

在上述代码片段中，我们首先创建了一个 Rectangle 和一个内嵌的 MouseArea 对象。其次，我们创建了 Connections 的实例，并且属性 target 关联到了 mouseArea 对象。这样就完成了 onClicked 信号与槽函数的目标设置。

当然，你也可以直接在槽步骤一中，像以下形式进行关联而无需新增连接元素(尤其是后续操作只是打印效果)。

MouseArea {
   id: mousearea1；
   OnClicked：console.log('New step');
}

断开信号与槽

在 QML 中为 QObject 类型对象连接的信号与槽，销毁该对象时会自动断开连接，所以一般情况下无需手动断开。但在某些特殊情况下需要主动断开信号与槽时，则调整 Settings.target 属性为 Null。

Connections {
    id: myConnection
}

Component.onCompleted: {
    myConnection.target = targetItem
}

function disconnectSignal() {
    myConnection.target = null
}

上面的例子中，我们首先为 Connections 创建了一个实例，并将其 id 设置为 myConnection。在组件加载完成后，将 targetItem 对象作为目标连接给我们创建的 Connection 实例。当我们需要断开这个连接时，只要将该 Connection 的 target 设为 null 即可。

（六）自定义信号

6.1 创建自定义信号

在QML中，您可以创建自己的信号以便在组件之间进行通信。这使得程序更加模块化和可扩展。要创建一个自定义信号，请遵循以下步骤：

在Item或任何其他QML组件中声明一个自定义信号。使用 signal 关键字 followed by the signal name and optional parameters enclosed in parentheses:

Item {
    id: myItem
    signal customSignal(string message, int value)
}

这将在名为myItem的项目内部创建一个新的信号，名为customSignal。此信号接受两个参数：一个字符串类型的message，和一个整数类型的value。
将需要响应信号的对象连接到该信号。首先，在处理信号的函数（槽）中设置处理逻辑，并确保已经分配了相应的参数名:

Rectangle {
    color: "red"
    anchors.fill: parent

    function handleCustomSignal(message, value) {
        console.log("Received custom signal with message:", message, "and value:", value);
    }

    Connections {
        target: myItem
        onCustomSignal: handleCustomSignal(message, value)
    }
 }

这里，我们给矩形添加了一种颜色，并设置了与父级同样的大小。然后，我们创建一个JavaScript函数handleCustomSignal，用于对customSignal执行操作。最后，我们使用 Connections 对象将信号与槽相连，设置对象的目标为myItem，并在onCustomSignal属性中调用handleCustomSignal函数。

相应地触发信号。可以使用一个事件或者条件来触发创建的信号：

Button {
    anchors.centerIn: parent
    text: "Click me!"
    onClicked: myItem.customSignal("Hello, world!", 42)
}

在这里我们创建了一个按钮，当它被点击时就会触发自定义信号。现在，在customSignal接收到消息和值后，handleCustomSignal()函数将执行其中的操作并打印内容至console控制台。

通过以上步骤，您已学会如何在QML中创建自定义信号、连接它们以及触发。

6.2 发送和接收自定义信号

在QML中，一旦定义了自定义信号，我们可以通过以下步骤发送和接收它：

发送信号：

在需要的地方调用自定义信号。例如，在 MouseArea 的点击事件处理器内部触发自定义信号。

Rectangle {
    id: myRect
    width: 100; height: 50
    color: "red"

    signal customSignal(string message)

    MouseArea {
        anchors.fill: parent
        onClicked: {
            // 触发自定义信号，并发送一个消息字符串
            myRect.customSignal("Clicked on Rectangle")
        }
    }
}

接收信号：

在要接收信号的组件或对象内部，添加一个对信号来源对象的引用（比如属性绑定）。
使用 Connections 元素创建并指向发送信号的源对象。
在 Connections 内部处理连接到自定义信号的槽。

示例：

import QtQuick 2.0

Item {
    width: 200; height: 300

    property alias targetRect: rect

    Rectangle {
        id: rect
        anchors.centerIn: parent
        color: "blue"
        
        // 带有自定义信号的其他元素作为这个矩形的子项
    }

    Connections {
        // 指向带有自定义信号的元素(假设已经在外部设置好target)，相当于关联来源
        target: targetRect

        // 调用关联的自定义信号处理槽
        onCustomSignal: {
            console.log("接收到自定义信号，消息内容为：", message)
        }
    }

}

总结：

在QML中发送信号时，请在源对象内直接调用它。
要接收一个信号，在 Connections 元素中添加对发送方的引用，并连接到适当的槽数。

6.3 接收和处理自定义信号

在QML中，接收和处理来自其他组件的自定义信号通常也非常简单。您只需要将需要响应该信号的对象连接到发送信号的对象，并为其指定一个处理函数。

这里有一个示例：我们创建了两个QML文件，一个名为Emitter.qml，用于发送自定义信号；另一个名为Receiver.qml，用于接收并处理来自发射器的信号。

Emitter.qml

import QtQuick 2.0

Item {
    id: emitter

    signal customSignal(string message)

    MouseArea {
        anchors.fill: parent
        onClicked: {
            emitter.customSignal("Hello from Emitter!")
        }
    }
}

在这个文件中，我们创建了一个包含MouseArea的Item组件并命名为emitter。鼠标点击时，它会触发customSignal信号，并向其传递字符串信息。

Receiver.qml

import QtQuick 2.0

Item {
    property alias source: connection.target

    Connections {
        id: connection
        onCustomSignal: console.log(message)
    }

    Emitter {
        id: localEmitter
        visible: false
    }

    Component.onCompleted: {
        if (!source) source = localEmitter
    }
}

在Receiver.qml中，我们创建了与Emitter.qml相同类型的对象（由id: localEmitter指定）。通过使用Connections元素并将目标(target)设置为希望监听的对象，我们可以监听其自定义信号。在这里，我们将connection.target设置为接收器的属性，使用户可以选择要连接的源。如果未指定任何外部源，那么在组件完成时(Component.onCompleted)，默认为本地发射器。当接收到来自发射器的信号时，在onCustomSignal处理函数中，我们将消息记录到控制台。

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Signal Example")

    Emitter {
        id: externalEmitter
    }

    Receiver {
        anchors.centerIn: parent
        source: externalEmitter
    }
}

最后，在main.qml文件中，我们实例化了一个Emitter和一个Receiver。然后, 我们更改 source 指向刚创建的externalEmitter，从而建立它们之间的连接。

运行此示例，每次您点击视窗中心区域时，都会将来自Emitter.qml的信号传递给并由Receiver.qml处理，打印出"Hello from Emitter!"。

（七）深入理解QML信号槽与多组件交互

7.1 QML信号槽的进阶技巧

在掌握QML信号槽的基本用法后，您可能希望了解一些进阶技巧，以提升开发效率和应用性能。以下是一些使用QML信号槽时的进阶建议：

动态连接和断开信号槽：在程序运行过程中，您可能需要根据条件动态连接或断开信号槽。可以使用connect()和disconnect()函数进行动态操作。

// 动态连接信号槽
signalSource.connectSignal.connect(slotReceiver.handleSignal)

// 动态断开信号槽
signalSource.connectSignal.disconnect(slotReceiver.handleSignal)

使用Qt.createQmlObject()在运行时创建元素并建立信号槽连接：当需要根据程序状态动态创建元素时，可以使用Qt.createQmlObject()方法。在创建新元素时，确保建立信号槽连接。

function createNewItem() {
    var newItemCode = 'import QtQuick 2.0; Item { signal someSignal }'
    var newItem = Qt.createQmlObject(newItemCode, parentItem);
    newItem.someSignal.connect(handleSignalFromNewItem);
}

控制信号传播：在处理嵌套元素事件（如MouseArea的点击事件）时，控制信号的传播对于避免意外触发操作至关重要。使用mouse.accepted = false控制信号的传播。

MouseArea {
    anchors.fill: parent
    onClicked: {
        // 控制信号传播
        mouse.accepted = false
    }
}

使用QObject::sender()获取信号发出者：在C++槽函数中，可以使用QObject::sender()方法获取实际发送信号的对象。这在处理多个对象的信号时特别有用。

void MyClass::handleSignal() {
    QObject *senderObj = sender();
    // 根据信号发出者执行相应操作
}

使用Qt.binding()动态设置属性绑定：您可以利用信号与槽实现动态属性绑定。Qt.binding()方法可以在运行时创建属性绑定，并在信号触发时更新属性值。

Item {
    id: parentItem

    Text {
        id: textElement
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            textElement.text = Qt.binding(function() {
                return "Clicked at " + new Date();
            })
        }
    }
}

通过掌握这些进阶技巧，您将能够更加灵活地使用QML信号槽，提升开发效率并优化应用程序的性能。在后续章节中，我们将探讨更多有关QML信号槽的实际示例和技巧。

7.2 使用QML信号槽处理程序逻辑与信息传递

QML信号槽在程序逻辑处理和信息传递方面扮演着重要角色。以下示例阐述如何利用信号槽实现各种功能：

组织UI组件和业务逻辑：将UI设计和业务逻辑分离，通过信号槽连接彼此。UI组件可以在用户交互产生事件时发出信号，业务逻辑组件则通过槽函数进行处理。

// UI组件
Rectangle {
    id: myRectangle
    width: 100
    height: 100
    color: "blue"

    signal rectangleClicked

    MouseArea {
        anchors.fill: parent
        onClicked: {
            myRectangle.rectangleClicked()
        }
    }
}

// 业务逻辑组件
Item {
    id: businessLogic

    function onRectangleClickedHandler() {
        console.log("Rectangle clicked!")
    }

    Connections {
        target: myRectangle
        onRectangleClicked: businessLogic.onRectangleClickedHandler()
    }
}

在嵌套元素间传递信息：当多个嵌套元素需要根据事件进行信息传递和更新时，使用信号槽实现层级间的通信。

Rectangle {
    id: outerRectangle
    width: 200
    height: 200
    color: "red"

    signal colorChanged(string newColor)

    Rectangle {
        id: innerRectangle
        x: 50
        y: 50
        width: 100
        height: 100
        color: "blue"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                outerRectangle.colorChanged("green")
            }
        }
    }

    Connections {
        target: outerRectangle
        onColorChanged: {
            outerRectangle.color = newColor
        }
    }
}

与C++对象进行通信：QML信号槽机制灵活地支持与C++对象进行通信。发送信号到C++槽，执行业务逻辑，并将结果返回给QML。

class Backend : public QObject {
    Q_OBJECT
public slots:
    void processRequest() {
        // 执行业务逻辑
    }
};

Item {
    id: mainItem

    // 将业务逻辑对象注册到QML
    property var backend: backendObjectFromCpp

    signal requestDataProcessed

    MouseArea {
        anchors.fill: parent
        onClicked: {
            mainItem.requestDataProcessed()
        }
    }

    Connections {
        target: mainItem
        onRequestDataProcessed: {
            backend.processRequest()
        }
    }
}

在后续章节中，我们将持续探讨QML信号槽在实际项目中的应用和技巧，帮助您更好地利用QML信号槽机制实现高效、可维护的用户界面应用。

7.3 使用QML信号槽实现多组件交互与响应

在复杂的用户界面应用中，多个组件间的交互和响应是必不可少的。QML信号槽为实现多组件交互提供了便利和强大的支持。以下是一些使用信号槽实现多组件交互的示例：

传递用户输入：用户在一个组件中的输入可能需要在其他组件中显示或处理。通过信号槽传递用户输入，实现组件间的信息共享。

TextInput {
    id: inputField
    text: ""

    onTextChanged: {
        mainItem.textUpdated(text)
    }
}

Item {
    id: mainItem
    signal textUpdated(string newText)

    Connections {
        target: mainItem
        onTextUpdated: {
            otherComponent.updateText(newText)
        }
    }
}

Text {
    id: otherComponent
    text: ""

    function updateText(newText) {
        text = newText
    }
}

同步组件状态：当多个组件处于同步状态时，一个组件的状态变化可能导致其他组件的状态也发生变化。使用信号槽实现组件间状态同步。

CheckBox {
    id: checkBox1

    onClicked: {
        mainItem.checkBoxClicked(checked)
    }
}

Item {
    id: mainItem
    signal checkBoxClicked(bool state)

    Connections {
        target: mainItem
        onCheckBoxClicked: {
            checkBox2.updateState(state)
        }
    }
}

CheckBox {
    id: checkBox2

    function updateState(newState) {
        checked = newState
    }
}

触发多级事件处理：某些场景下，用户触发一个事件需要在多个组件层级中处理。使用信号槽进行逐级触发，保持各组件职责分离。

Item {
    id: mainItem
    signal buttonClicked

    Item {
        id: subItem1
        signal subButtonClicked

        Button {
            id: theButton
            onClicked: {
                subItem1.subButtonClicked()
            }
        }

        Connections {
            target: subItem1
            onSubButtonClicked: {
                mainItem.buttonClicked()
            }
        }
    }

    Connections {
        target: mainItem
        onButtonClicked: {
            console.log("Button clicked in Main Item")
        }
    }
}

通过合理运用QML信号槽，可以高效地实现多组件交互与响应。在后续章节中，我们将深入探讨QML信号槽在实际项目中的应用及其优势。

QML信号与信号槽实践指南：轻松掌握现代软件开发的关键技术（三）https://developer.aliyun.com/article/1464211

QML信号与信号槽实践指南：轻松掌握现代软件开发的关键技术（二）

（五）QML信号槽的连接与应用

5.1 在QML中创建槽

5.2 使用槽处理信号

5.3 连接和断开信号与槽

连接信号与槽

断开信号与槽

（六）自定义信号

6.1 创建自定义信号

6.2 发送和接收自定义信号

发送信号：

接收信号：

6.3 接收和处理自定义信号

Emitter.qml

Receiver.qml

main.qml

（七）深入理解QML信号槽与多组件交互

7.1 QML信号槽的进阶技巧

7.2 使用QML信号槽处理程序逻辑与信息传递

7.3 使用QML信号槽实现多组件交互与响应

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

QML信号与信号槽实践指南：轻松掌握现代软件开发的关键技术（二）

（五）QML信号槽的连接与应用

5.1 在QML中创建槽

5.2 使用槽处理信号

5.3 连接和断开信号与槽

连接信号与槽

断开信号与槽

（六）自定义信号

6.1 创建自定义信号

6.2 发送和接收自定义信号

发送信号：

接收信号：

6.3 接收和处理自定义信号

Emitter.qml

Receiver.qml

main.qml

（七）深入理解QML信号槽与多组件交互

7.1 QML信号槽的进阶技巧

7.2 使用QML信号槽处理程序逻辑与信息传递

7.3 使用QML信号槽实现多组件交互与响应

热门文章

最新文章

相关电子书

相关实验场景