qml信号与槽函数

信号与槽函数基础

方法1-使用Connections

main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    //信号
    signal testSig(string s,int value)

    //Connections绑定信号和槽函数
    Connections{
        //发送信号组件id
        target:window
        //槽函数(使用On+信号名)    这种方式不被推荐
        onTestSig:{
            console.log(s,value)
        }
    }

    //点击按钮发送信号
    Button{
        width:50;
        height:50
        onClicked: {
            testSig("发送textSig信号","999")
        }
    }
}

上面的方式可读性太差，一般采用下面的方式

main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    //信号
    signal testSig(string s,int value)

    //Connections绑定信号和槽函数
    Connections{
        //发送信号组件id
        target:window
        //槽函数（推荐使用这种 信号名+参数列表 的槽函数形式）
        function onTestSig(str,iValue){
            console.log(str,iValue)
        }
    }

    //点击按钮发送信号
    Button{
        width:50;
        height:50
        onClicked: {
            testSig("发送textSig信号","999")
        }
    }
}

方式2-使用connect（不常用）

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    //信号
    signal testSig(string s,int value)

    //槽函数
    function func(s,v){
        console.log(s,v);
    }

    //组件加载结束时绑定信号和槽函数组件加载结束时绑定信号和槽函数

    Component.onCompleted: {
        testSig.connect(func)
    }

    //点击按钮发送信号
    Button{
        width:50;
        height:50
        onClicked: {
            testSig("发送textSig信号","999")
        }
    }
}

上面两种方式的运行结果如下：

自定义组件与信号槽使用

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    //组件
    Component{
        id:com
        Button{//按钮
            signal btnSig(int value)//定义信号
            onClicked: {
                btnSig(10)//发送信号
            }
        }
    }

    //加载自定义组件
    MyComponent{
        //按钮组件挂载到自定义组件中
        com1: com
        com2: com
    }
}

//myComponent.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Rectangle {
    width:400
    height:300
    property Component com1
    property Component com2
    border.color:"black"
    
    //动态加载组件
    Loader{
        id:loader1
        sourceComponent: com1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 20
		//连接信号和槽
        Connections{
            target:loader1.item
            ignoreUnknownSignals: true//忽略不知道的的信号(防止报出警告)
            function onBtnSig(value){
                console.log("right:"+value)
            }
        }
    }
	//动态加载组件
    Loader{
        id:loader2
        sourceComponent: com2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 150
		//连接信号和槽
        Connections{
            target:loader2.item
            ignoreUnknownSignals: true//忽略不知道的的信号
            function onBtnSig(value){
                console.log("left:"+value)
            }
        }
    }
}