QML学习之QML信号和槽，自定义组件和信号槽的使用

QML-信号与槽

第一种方式

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5                   //导入Controls 2.0模块
//import QtQuick.Controls 1.4 as QC14            //导入Controls 1.4模块，取别名QC14
//import QtQuick.Controls.Styles 1.4 as QCS14    //导入Controls.Styles 1.4模块，取别名QCS14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("My QML")

    //自定义信号
    signal testSig(string s,int value)
    //自定义函数
    function func(ss,ii){
        console.log(ss,ii)
    }

    Button{
        width: 100
        height: 50
        //发送信号
        onClicked: {
            testSig("张三",23)
        }
    }

    //组件创建完成以后去接收这个信号
    Component.onCompleted: {
        //信号+绑定(后面跟自己定义的函数方法或者是回调函数）
        testSig.connect(func)
    }
}

第二种方式（使用Connections QML Type）//这种方法没有成功，但是我看视频成功了，不清楚是不是Qt已经弃用了这种方法，推荐使用第三种方式。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5                   //导入Controls 2.0模块
//import QtQuick.Controls 1.4 as QC14            //导入Controls 1.4模块，取别名QC14
//import QtQuick.Controls.Styles 1.4 as QCS14    //导入Controls.Styles 1.4模块，取别名QCS14

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

    //自定义信号
    signal testSig(string s,int value)
    //自定义函数
    function func(ss,ii){
        console.log(ss,ii)
    }

    Button{
        width: 100
        height: 50
        //发送信号
        onClicked: {
            testSig("张三",23)
        }
    }

    //可以认为是一个组件，有三个属性（enabled : bool
    //enabled : bool
    //ignoreUnknownSignals : bool
    //target : Object
    Connections {
        //发送信号的对象是谁
        target: window
        //写一个函数on+信号（信号的首字母需要大写）触发这个槽函数
        onTestSig: {
            console.log(s,value)
        }
    }
}

第三种直接在Connections 写一个function方法

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5                   //导入Controls 2.0模块
//import QtQuick.Controls 1.4 as QC14            //导入Controls 1.4模块，取别名QC14
//import QtQuick.Controls.Styles 1.4 as QCS14    //导入Controls.Styles 1.4模块，取别名QCS14

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

    //自定义信号
    signal testSig(string s,int value)
    //自定义函数
    function func(ss,ii){
        console.log(ss,ii)
    }
    Button{
        width: 100
        height: 50
        //发送信号
        onClicked: {
            testSig("张三",23)
        }
    }

    //可以认为是一个组件，有三个属性（enabled : bool
    //enabled : bool
    //ignoreUnknownSignals : bool
    //target : Object
    Connections {
        //发送信号的对象是谁
        target: window
        //写一个函数on+信号（信号的首字母需要大
        //直接写一个function
        function onTestSig(str,iValue){
            console.log(str,iValue)
        }
    }
}

上面的二种方式在实际的工作中会用到第二种方式的第二种方法，上面这种

自定义组件与信号槽的使用

//main.qml
import QtQuick 2.7
import QtQuick.Window 2.7
import QtQuick.Controls 2.5                   //导入Controls 2.0模块
import QtQuick.Controls 1.4 as QC14            //导入Controls 1.4模块，取别名QC14
import QtQuick.Controls.Styles 1.4 as QCS14    //导入Controls.Styles 1.4模块，取别名QCS14

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

    Component{
        id: com
        Button{
            //如果需要在自定义的控件当中去处理这个事件（定义信号+发送信号）
            signal btnSig(int value)
            onClicked: {
//                console.log("123")
                btnSig(10)
            }
        }
    }

    MyComponent {
        com1: com
        com2: com
    }
}

//MyComponent.qml
import QtQuick 2.7
import QtQuick.Controls 2.5

Rectangle{
    id: rect
    width: 400
    height: 300
    //外部传Component进来
    property Component com1
    property Component com2
    border.color: "red"

    Loader {
        id: loader1
        sourceComponent:com1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 20

        //怎么处理传过来的信号？
        Connections{
            //这里为什么是loader1.item，当前loader1加载的项就是这个item
            //我们不需要知道传递过来的信号是什么控件，我只需要知道是这个loader1的item会发送信号过来
            target: loader1.item
            onBtnSig: {
                console.log("right" + value)
            }
        }
    }
    
    Loader {
        id: loader2
        sourceComponent:com2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 150
        Connections{
            //这里为什么是loader1.item，当前loader1加载的项就是这个item
            //我们不需要知道传递过来的信号是什么控件，我只需要知道是这个loader1的item会发送信号过来
            target: loader2.item
            ignoreUnknownSignals: true
            function onBtnSig(value){
                console.log("left " + value)
            }
        }
    }
}

补充键盘事件获取焦点（按左右切换焦点）

Keys.onRightPressed:{
xxx.focus = ture
}
这里不知道谁需要focus，组件时候也不知道给谁，这时候需要定义一个信号。

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.7
import QtQuick.Controls 2.5                  
Window {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("My QML")

    Component{
        id: com
        Button{
            id: btn
            width: 100
            height: 50
            //如果需要在自定义的控件当中去处理这个事件（定义信号+发送信号）
            background: Rectangle {
                anchors.fill: parent
                border.color: btn.activeFocus ? "blue" : "black"
            }

            signal leftBtnPressed()
            Keys.onLeftPressed: {
                leftBtnPressed()
            }
        }
    }

    MyComponent {
        com1: com
        com2: com
    }
}

//MyComponent.qml
import QtQuick 2.7
import QtQuick 2.12
Rectangle{
    id: rect
    width: 400
    height: 300
    //外部传Component进来
    property Component com1
    property Component com2
    border.color: "red"

    Loader {
        id: loader1
        sourceComponent:com1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 20

        //怎么处理传过来的信号？
        Connections{
            //这里为什么是loader1.item，当前loader1加载的项就是这个item
            //我们不需要知道传递过来的信号是什么控件，我只需要知道是这个loader1的item会发送信号过来
            target: loader1.item
            function onLeftBtnPressed(){
                loader2.item.focus = true
                loader2.item.forceActiveFocus()
            }

        }
        Component.onCompleted: {
            loader1.item.focus = true
            loader1.item.forceActiveFocus()
        }
    }

    Loader {
        id: loader2
        sourceComponent:com2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 150
        Connections{
            //这里为什么是loader1.item，当前loader1加载的项就是这个item
            //我们不需要知道传递过来的信号是什么控件，我只需要知道是这个loader1的item会发送信号过来
            target: loader2.item
            function onBtnSig(value){
                console.log("left " + value)
            }
        }
    }
}