程序運行截圖如下：

點擊右邊的sender

左邊會接收到數據：

多次點擊后：

這里關鍵是記錄兩點：

1.?是qml界面不同控件數據的傳輸

2.?使用設計器完成簡單的qml控件設計

?

先來記錄下qml中Designer的簡單使用，這個比較簡單。

新建文件的時候選擇這個即可：

?

創建好后會有2個文件：

一個是

XXXX.qml

一個是XXXXForm.ui.qml

如下面的這個：

首先看下Circle.qml

這里可以看到Circle.qml里面其實是CircleForm

?

進入CircleForm這個item，其實是CircleForm.ui.qml這個文件里面有一個item?如下：

下面構造一個如下的界面：

這里無需敲代碼，直接用界面鼠標點點，弄出來。

設置大小，以及Rectangle的顏色

設置其布局

?

?

下面是設置為圓形

點下上面那個天藍色的

然后Binding。即可。

添加一個text。設置字體以及大小：

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

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

這里一般在XXXXForm.ui.qml中設計器進行設計，

在XXXX.qml中設置那些動態屬性啥的。比如下面的這個：

如下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} }

或者新建一個去操作：

如下的這個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"} }

下面是關于QML數據交互的

關鍵代碼如下：

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有一個fuction是設置displayText的值。

在send中

在onTargetChanged信號中，使用connect關聯這個recive函數

main.qml

?

Sender中，使用target指定要receiver的qml對象

?

?

源碼打包下載地址：

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

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。