QML(11)——qml界面之间通信方式详解

一、属性绑定

属性绑定具有持续性

1、直接绑定 property01: property02

在组件初始化后，一直绑定
子界面可以直接调用父界面的全部组件/属性

实例

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 5)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}}// 子界面SecondPane {Layout.alignment: Qt.AlignHCenterLayout.topMargin: 50Layout.fillWidth: trueLayout.preferredHeight: 80}
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 内部明确size, 便于预览效果，   实际size在调用处再次设置width: 200// 子界面可以直接调用父界面的组件text: "second call root:  " + rootRecSize.textfont.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

2、条件绑定 Qt.binding

满足某些条件时，才进行绑定动作。
如果绑定时，组件还未初始化完成，绑定动作会失效。

实例

点击方框后，才开始属性绑定

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 3)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}}// 子界面SecondPane {id: secondPaneLayout.alignment: Qt.AlignHCenterLayout.topMargin: 50Layout.fillWidth: trueLayout.preferredHeight: 80MouseArea {anchors.fill: parentonClicked: {// 单次赋值，不具备持续性
//                secondPane.text = rootRecSize.textsecondPane.text = Qt.binding(function() {return rootRecSize.text})}}}
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 内部明确size, 便于预览效果，   实际size在调用处再次设置width: 200font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

二、信号传递

1、on<Property>Changed

属性传递分为组件默认属性 和 自定义属性

实例

代码

//  父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentSecondPane {Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onHeightChanged: { text = "onHeightChanged: " + height }}SecondPane {Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onAreaChanged: { text = "onAreaChanged: " + area }}
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondTextproperty int area: width * height   // 自定义属性// 内部明确size, 便于预览效果，   实际size在调用处再次设置width: 200height: 80font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenter
}

2、on<Signal>

分为组件默认属性 和 自定义属性

实例

代码

// 父界面
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)color: "gray"opacity: 0.5Text {id: rootRecSizetext: rootRec.width + " * " + rootRec.heightfont.pixelSize: 22anchors.centerIn: parent}MouseArea {anchors.fill: parentonWheel: {rootRecSize.text = "default signal"}}}SecondPane {id: pane01Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onClick: {pane01.text = "自定义信号, 不含参数"}}SecondPane {id: pane02Layout.fillWidth: trueLayout.preferredHeight: Math.round(parent.height / 4)onSigValue: {pane02.text = "自定义信号, 含参数: " + loX + "*" + loY}}
}

// 子界面
import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondText// 自定义信号signal click()signal sigValue(int loX, int loY)width: 200height: 80font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterMouseArea {anchors.fill: parentonClicked:  {secondText.click()secondText.sigValue(mouseX, mouseY)}}
}

3、条件信号传递 connect

上述 on<Property>Changed 和 on<Signal> 都是属于无条件的信号传递。响应信号的代码都放在元素内部，通过JS代码块就地实现。
如果需要在某些条件下才建立信号机制，则使用connect。

实例

点击”start“按钮之前，任何信号都不会出发
点击之后， 开始建立信号机制

代码

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 1.4ColumnLayout {anchors.fill: parentRectangle {id: rootRecLayout.fillWidth: trueLayout.preferredHeight: 50color: "green"opacity: 0.5Text {id: rootRecSizetext: "start"font.pixelSize: 22anchors.centerIn: parent}MouseArea {id: mouseAreaanchors.fill: parentonClicked: {rootRec.opacity = 0.2// 开始建立信号连接机制pane01.click.connect(slotNone)              // 无参数信号pane02.sigValue.connect(slotPara)           // 有参数信号pane03.heightChanged.connect(slotProperty)  // 属性信号}}}SecondPane {id: pane01Layout.alignment: Qt.AlignHCenter}SecondPane {id: pane02Layout.alignment: Qt.AlignHCenter}SecondPane {id: pane03Layout.alignment: Qt.AlignHCenterLayout.preferredHeight: parent.height / 4}function slotNone(){pane01.text = "slotNone"}function slotPara(a){pane02.text = "slotPara: " + a}function slotProperty(){pane03.text = "slotProperty" + pane03.height}
}

import QtQuick 2.15
import QtQuick.Controls 1.4TextField {id: secondTextproperty int area: width * heightsignal click()signal sigValue(int loX)// 内部明确size, 便于预览效果，   实际size在调用处再次设置width: 200height: 60font.pixelSize: 20horizontalAlignment: Qt.AlignHCenterverticalAlignment: Qt.AlignVCenterMouseArea {anchors.fill: parentonClicked:  {secondText.click()secondText.sigValue(mouseX)}}
}

4、Connections

Connections的优点主要有以下3个：

• List item
• 将多个对象连接到同一个QML信号上
• 在发出信号的对象的作用域之外来建立连接 （条件信号传递）
  发射信号的对象是C++

前两条，connect具有同样的效果。

MouseArea {id: area
}Connections {target: areafunction onClicked(mouse) { foo(mouse) }
}