网站建设专业的公司排名,漯河网站关键词优化,廊坊seo排名霸屏,网站开发频道构架目录 一、属性绑定1、直接绑定 property01: property02实例代码 2、条件绑定 Qt.binding实例代码 二、信号传递1、onPropertyChanged实例代码 2、onSignal实例代码 3、条件信号传递 connect实例代码 4、Connections 一、属性绑定
属性绑定具有持续性
1、直接… 目录 一、属性绑定1、直接绑定 property01: property02实例代码 2、条件绑定 Qt.binding实例代码 二、信号传递1、onPropertyChanged实例代码 2、onSignal实例代码 3、条件信号传递 connect实例代码 4、Connections 一、属性绑定
属性绑定具有持续性
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: grayopacity: 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: grayopacity: 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、onPropertyChanged
属性传递分为组件默认属性 和 自定义属性
实例 代码
// 父界面
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、onSignal
分为组件默认属性 和 自定义属性
实例 代码
// 父界面
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: grayopacity: 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
上述 onPropertyChanged 和 onSignal 都是属于无条件的信号传递。响应信号的代码都放在元素内部通过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: greenopacity: 0.5Text {id: rootRecSizetext: startfont.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) }
}
