QML笔记-对QML中信号与槽的基本认识

目录

 

 

基本概念

演示及实例

---

 

基本概念

首先是信号的声明，如下：

Rectangle{

    id: rectangleId
    signal greet(string message)

    ...
}

当声明一个信号后会自动生成一个on<SignalName>这个槽函数（这种是JavaScript代码）

 

使用下面的方式也可以关联信号与槽，槽函数如下！

function myGreeting(mMessage){

    console.log("myGreeting function called. The parameter is : " + mMessage)
    
    ...
}

关联如下：

Component.onCompleted:{

    rectangleId.greet.connect(rectangleId.myGreeting)
}

 

演示及实例

运行截图如下：

程序结构如下：

源码如下：

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

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

    property int increment: 50

    Rectangle {

        id: rectangleId
        width: 200 + increment
        height: 300
        color: "red"

        signal greet(string message)


        function myGreeting(mMessage){

            console.log("myGreeting slot called. The parameter is : " + mMessage)
            increment += 50
        }

        MouseArea{

            anchors.fill: parent
            onClicked: {

                rectangleId.greet("Hello there")
            }
        }

        Component.onCompleted: {

            greet.connect(rectangleId.myGreeting)
        }
    }
}

另外一种方法：

import QtQuick 2.9
import QtQuick.Window 2.2

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

    property int increment: 50

    Rectangle {

        id: rectangleId
        width: 200 + increment
        height: 300
        color: "red"

        signal greet(string message)


        onGreet: {

            console.log("onGreet: greet signal emited, parameter is : " + increment)
            increment += 50
        }

        MouseArea{

            anchors.fill: parent
            onClicked: {

                rectangleId.greet("Hello there")
            }
        }
    }
}