信号创建

  1. signal testSig(string s, int value)

槽函数

  1. function func(ss, ii){
  2.         console.log("s: ",ss, " i: ", ii)
  3.     }

信号绑定

  1. Component.onCompleted: {
  2.         testSig.connect(func)   //绑定信号处理函数
  3.     }

信号触发

  1. Button{
  2.         width: 50
  3.         height: 20
  4.         onClicked:
  5.         {
  6.             //触发信号
  7.             testSig("zhangsan", 22)
  8.         }
  9.     }
  1. //定义一个信号
  2.     signal testSig(string s, int value)
  3.     function func(ss, ii){
  4.         console.log("s: ",ss, " i: ", ii)
  5.     }
  7.     Button{
  8.         width: 50
  9.         height: 20
  10.         onClicked:
  11.         {
  12.             //触发信号
  13.             testSig("zhangsan", 22)
  14.         }
  15.     }
  16.     Component.onCompleted: {
  17.         testSig.connect(func)   //绑定信号处理函数
  18.     }

image.png
使用Connections组件绑定信号与槽。

Connections

属性

  1. enabled : bool
  2. ignoreUnknownSignals : bool    //target无改信号的时候忽略掉function绑定无效信号导致的编译警告
  3. target : Object     //信号发出者

替换绑定方式1：

  1. Connections{
  2.         target:root
  3.         onTestSig:{
  4.             console.log(s," ", value)    //参数名称不直接
  5.         }
  6.     }

on+信号首字母大写的方式绑定信号槽不推荐，这主要是qml自带槽的写法。

替换绑定方式2：

function on+首字母大写信号名+括号信号参数名称(可以自己指定)， 然后槽具体实现

  1. Connections{
  2.         target:root
  3.         function onTestSig(str, ivalue)
  4.         {
  5.             console.log("onTestSig func ", str, " ", ivalue)
  6.         }
  7.     }

自定义组件信号槽的应用：

  1. import QtQuick 2.0
  2. import QtQuick.Controls 2.15
  4. Rectangle {
  5.     width: 200
  6.     height: 100
  7.     anchors.centerIn: parent
  9.     property Component com1 //不给默认值
  10.     property Component com2
  11.     border.color: "red"
  12.     Loader{
  13.         id: loader1
  14.          sourceComponent: com1
  15.          anchors.bottom: parent.bottom
  16.          anchors.bottomMargin: 20
  17.          anchors.right: parent.right
  18.          anchors.rightMargin: 100
  20.          Connections{
  21.              target: loader1.item
  22.              ignoreUnknownSignals: true //当该信号不存在时忽略掉
  23.              function onBtnSig(value)
  24.              {
  25.                  console.log("top value ", value)
  26.              }
  27.              function onRightBtnPressed()
  28.              {
  29.                  loader2.item.focus = true
  30.                  loader2.item.forceActiveFocus()
  31.                 console.log("onRightBtnPressed")
  32.              }
  33.          }
  34.          Component.onCompleted: {
  35.              loader1.item.focus = true
  36.              loader1.item.forceActiveFocus()
  37.          }
  38.     }
  40.     Loader{
  41.         id: loader2
  42.          sourceComponent: com2
  43.          anchors.bottom: parent.bottom
  44.          anchors.bottomMargin: 20
  45.          anchors.right: parent.right
  46.          anchors.rightMargin: 20
  47.          Connections{
  48.              target: loader2.item
  49.              ignoreUnknownSignals: true
  50.              function onBtnSig(value)
  51.              {
  52.                  console.log("bottom value ", value)
  53.              }
  54.              function onLeftBtnPressed()
  55.              {
  56.                  loader1.item.focus = true
  57.                  loader1.item.forceActiveFocus()
  58.                 console.log("onLeftBtnPressed")
  59.              }
  60.          }
  61.     }
  62. }
  1. Component{
  2.         id: com
  3.         Button{
  4.             id: btn1
  5.             width:50
  6.             height: 20
  7.             background: Rectangle{
  8.                 border.color: btn1.activeFocus ? "red":"green"  //activeFocus体现了唯一性
  9.                 border.width: 2
  10.             }
  11. ////            signal btnSig(int v)
  12. //            onClicked: {
  13. ////                btnSig(22)
  14. //            }
  15.             signal leftBtnPressed()
  16.             Keys.onLeftPressed: {
  17.                 leftBtnPressed()
  18.                 console.log("btn onLeftPressed")
  19.             }
  20.             signal rightBtnPressed()
  21.             Keys.onRightPressed: {
  22.                 rightBtnPressed()
  23.                 console.log("btn onRightPressed")
  24.             }
  25.         }
  26.     }
  28.     MyComponent{
  29.         com1:com
  30.         com2:com
  31.     }

image.png
自定义组件中使用Loader进行自定义组件的加载，通过Loader属性item获取到自定义的组件并赋给Connections的target属性，为了防止未定义的方法的绑定，加上ignoreUnknownSignals：true防止编译器报错，正式项目中可不加不然bug不好找。