程序運(yùn)行截圖如下：

點(diǎn)擊右邊的sender

左邊會(huì)接收到數(shù)據(jù)：

多次點(diǎn)擊后：

這里關(guān)鍵是記錄兩點(diǎn)：

1.?是qml界面不同控件數(shù)據(jù)的傳輸

2.?使用設(shè)計(jì)器完成簡(jiǎn)單的qml控件設(shè)計(jì)

?

先來記錄下qml中Designer的簡(jiǎn)單使用，這個(gè)比較簡(jiǎn)單。

新建文件的時(shí)候選擇這個(gè)即可：

?

創(chuàng)建好后會(huì)有2個(gè)文件：

一個(gè)是

XXXX.qml

一個(gè)是XXXXForm.ui.qml

如下面的這個(gè)：

首先看下Circle.qml

這里可以看到Circle.qml里面其實(shí)是CircleForm

?

進(jìn)入CircleForm這個(gè)item，其實(shí)是CircleForm.ui.qml這個(gè)文件里面有一個(gè)item?如下：

下面構(gòu)造一個(gè)如下的界面：

這里無需敲代碼，直接用界面鼠標(biāo)點(diǎn)點(diǎn)，弄出來。

設(shè)置大小，以及Rectangle的顏色

設(shè)置其布局

?

?

下面是設(shè)置為圓形

點(diǎn)下上面那個(gè)天藍(lán)色的

然后Binding。即可。

添加一個(gè)text。設(shè)置字體以及大小：

這里把text和圓的部分屬性Export?Property?as?Alias

這樣就可以了。看看代碼：

這里一般在XXXXForm.ui.qml中設(shè)計(jì)器進(jìn)行設(shè)計(jì)，

在XXXX.qml中設(shè)置那些動(dòng)態(tài)屬性啥的。比如下面的這個(gè)：

如下BackgroundForm.ui.qml

Background.qml

import QtQuick 2.4BackgroundForm {property Circle target: nullfocus: trueKeys.onPressed: {if(event.key == Qt.Key_Plus) target.width = target.width + 10if(event.key == Qt.key_Minus) target.width = target.width - 10} }

或者新建一個(gè)去操作：

如下的這個(gè)Sender.qml

import QtQuick 2.0Circle {id: sendButtonproperty int counter: 0property Receiver target: nullsignal send(string value)onTargetChanged: send.connect(target.receive)MouseArea{anchors.fill: parentonClicked: {counter++parent.send(counter)}onPressed: parent.buttonColor = "green"onReleased: parent.buttonColor = "blue"} }

下面是關(guān)于QML數(shù)據(jù)交互的

關(guān)鍵代碼如下：

Sender.qml

import QtQuick 2.0Circle {id: sendButtonproperty int counter: 0property Receiver target: nullsignal send(string value)onTargetChanged: send.connect(target.receive)MouseArea{anchors.fill: parentonClicked: {counter++parent.send(counter)}onPressed: parent.buttonColor = "green"onReleased: parent.buttonColor = "blue"} }

Receiver.qml

import QtQuick 2.0Circle {id: receiverButtonfunction receive(value){displayText = valueclicknotify.running = true}SequentialAnimation on buttonColor {id: clicknotifyrunning: falseColorAnimation{from: "red"to: "blue"duration: 250}ColorAnimation {from: "blue"to: "red"duration: 250}} }

main.qml

import QtQuick 2.12 import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Background {id: backgroundclip: falsevisible: trueanchors.fill: parenttarget: senderReceiver {id: receivery: 148displayText: "Receiver"buttonColor: "#3170f0"anchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 50width: sender.width}Sender {id: senderx: 320y: 148width: 200height: 200displayText: "Send"anchors.verticalCenter: parent.verticalCenteranchors.right: parent.rightanchors.rightMargin: 50target: receiver}} }

從中可以看到：

Receiver有一個(gè)fuction是設(shè)置displayText的值。

在send中

在onTargetChanged信號(hào)中，使用connect關(guān)聯(lián)這個(gè)recive函數(shù)

main.qml

?

Sender中，使用target指定要receiver的qml對(duì)象

?

?

源碼打包下載地址：

https://github.com/fengfanchen/Qt/tree/master/QMLSignal

?

?

總結(jié)

以上是生活随笔為你收集整理的QML笔记-使用connect界面数据交互（qml中Designer使用）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。