Qt 学习笔记 ：QML信号槽及属性绑定

QML信号槽及属性绑定

• 参考Qt 官方视频 ：https://www.bilibili.com/video/BV1Ht411y7ER?t=881

目录

QML信号槽及属性绑定

添加背景 Background.qml

创建发送者 Circle.qml

创建Receiver

创建Sender

属性绑定

• 建立项目

添加背景 Background.qml

• 拖入基本图形

• 填充屏幕

• 设置背景颜色，设置 id

创建发送者 Circle.qml

• 设置宽度

• 填充图形

• 设置颜色，及半径

• 添加文字

• 设置Text属性

• 设置整体Id

• 为了重复利用，可将属性导出

• 将text导出

• 背景色导出

创建Receiver

• Receiver.qml

import QtQuick 2.0

Circle {
    id: recevier
    function receive(value)
    {
        contentText = value
        colornotify.running = true

    }

    SequentialAnimation on circleColor {
        id:colornotify
        running: false


        ColorAnimation {
            from: "green"
            to: "pink"
            duration: 200
        }

        ColorAnimation {
            from: "pink"
            to: "green"
            duration: 200
        }

    }
}

创建Sender

• sender.qml

import QtQuick 2.0

Circle {
    id:sender
    property int counter: 0
    signal send(string value)
    property Receiver recvTarget: null
    onRecvTargetChanged: {
        send.connect(recvTarget.receive)
    }
    
    MouseArea{
        anchors.fill: parent
        onClicked: {
            sender.counter++
            sender.send(counter)
        }
        
        onPressed: {
            sender.circleColor = "blue"
        }
        
        onReleased:{
            sender.circleColor = "red"
        }
    }
}

• main.qml

• 拖入自定义组件，设置各种属性

• 设置Sender ，Receiver

• main.qml添加

属性绑定

• 希望receiver的宽度和sender一起变化
• 在main.qml

• 效果