Qt study notes: QML signal slots and attribute binding

QML signal slot and attribute binding

• Refer to Qt official video: https://www.bilibili.com/video/BV1Ht411y7ER?t=881

 

table of Contents

QML signal slot and attribute binding

Add background Background.qml

Create the sender Circle.qml

Create Receiver

Create Sender

Property binding

• create project

Add background Background.qml

• Drag in basic graphics

• Fill the screen

• Set the background color, set the id

Create the sender Circle.qml

• Set width

• Fill graphics

• Set the color and radius

• Add text

• Set the Text property

• Set the overall Id

• For reuse, attributes can be exported

• Export text

• Background color export

Create 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
        }

    }
}

Create 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

• Drag in custom components and set various properties

• Set Sender, Receiver

• main.qml add

Property binding

• Hope that the width of the receiver and sender will change together
• In main.qml

• effect