程序运行截图如下：

点击右边的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.4

BackgroundForm {

    property Circle target: null
    focus: true

    Keys.onPressed: {

        if(event.key == Qt.Key_Plus) target.width = target.width + 10
        if(event.key == Qt.key_Minus) target.width = target.width - 10
    }
}

或者新建一个去操作：

如下的这个Sender.qml

import QtQuick 2.0

Circle {

    id: sendButton

    property int counter: 0
    property Receiver target: null

    signal send(string value)
    onTargetChanged: send.connect(target.receive)

    MouseArea{

        anchors.fill: parent

        onClicked: {

            counter++
            parent.send(counter)
        }

        onPressed: parent.buttonColor = "green"
        onReleased: parent.buttonColor = "blue"
    }
}

下面是关于QML数据交互的

关键代码如下：

Sender.qml

import QtQuick 2.0

Circle {

    id: sendButton

    property int counter: 0
    property Receiver target: null

    signal send(string value)
    onTargetChanged: send.connect(target.receive)

    MouseArea{

        anchors.fill: parent

        onClicked: {

            counter++
            parent.send(counter)
        }

        onPressed: parent.buttonColor = "green"
        onReleased: parent.buttonColor = "blue"
    }
}

Receiver.qml

import QtQuick 2.0

Circle {

    id: receiverButton
    function receive(value){

        displayText = value
        clicknotify.running = true
    }

    SequentialAnimation on buttonColor {

        id: clicknotify
        running: false

        ColorAnimation{

            from: "red"
            to: "blue"
            duration: 250
        }


        ColorAnimation {
            from: "blue"
            to: "red"
            duration: 250
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Background {
        id: background
        clip: false
        visible: true
        anchors.fill: parent

        target: sender

        Receiver {
            id: receiver
            y: 148
            displayText: "Receiver"
            buttonColor: "#3170f0"
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 50
            width: sender.width
        }

        Sender {
            id: sender
            x: 320
            y: 148
            width: 200
            height: 200
            displayText: "Send"
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 50
            target: receiver
        }
    }
}

从中可以看到：

Receiver有一个fuction是设置displayText的值。

在send中

在onTargetChanged信号中，使用connect关联这个recive函数

main.qml

 

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

 

 

源码打包下载地址：

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