QML小例子【QML工程裡信号與槽】

1、效果

代碼參考B站視訊：https://www.bilibili.com/video/av36584062

功能：點選左邊，會發出信号，右邊會有個顔色動畫，然後計數+1

2、分析：

一共有兩個對象，他們很多屬性都差不多，如可變顔色、原型、可變text..是以可以聲明一個Circle對象，然後Sender和Recver都繼承它；

能夠通過Sender控制Recver，那麼Sender一定有信号發出，然後Recver有一個函數用于狀态改變；

應該在發出信号的地方即Sender裡，連接配接信号與槽,根據總結：https://www.cnblogs.com/judes/p/11243242.html，這裡屬于QML的信号QML的槽，是以應該直接使用signal.connect(slot)的形式，但是怎麼在Sender中通路到Recver的槽函數呢？

可以這樣：在Sender裡加一個Recver屬性，初始化為null，然後在這個Recver的onRecverChanged回調中，connect。

3、圖形基類Circle.qml

import QtQuick 2.0

Item {
    width: 200
    height: 200
    property alias circlrColor: circlr.color
    property alias contentText: content.text
    Rectangle {
        id: circlr
        color: "#f94141"
        radius: width*0.5
        anchors.fill: parent

        Text {
            id: content
            x: 93
            y: 94
            color: "#e5d9d9"
            text: qsTr("Text")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 30
        }
    }
}      

這裡需要注意：

property alias circlrColor: circlr.color

property alias contentText: content.text

我是直接在設計界面直接導出别名屬性：

這個别名屬性即alias，外界可以通過改變這個變量直接改變到對應的控件屬性。

4、Sender.qml

import QtQuick 2.0

Circle {
    id: sender
    property int counter: 0
    signal sendSignal(string value)
    property Recver target:null
    onTargetChanged: {
        sendSignal.connect(target.recvSlot)
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            sender.counter++
            sender.sendSignal(counter)
        }
        onPressed: {
            sender.circlrColor="red"
        }
        onReleased: {
            sender.circlrColor="blue"
        }
    }
}      

核心就是在紅色的地方，将null Recver作為自己的屬性，然後在main裡指派，當指派成功就連接配接信号與槽

5、Recver.qml

import QtQuick 2.0
import QtQuick 2.7
Circle {
    id: recver
    function recvSlot(value)
    {
        contentText=value;
        colorNotify.running=true;
    }

    SequentialAnimation on circlrColor {
        id: colorNotify
        running: false

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

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

這裡有個重點就是紅色部分，即序列動畫，裡面的動畫按照順序執行，看文檔或者資料都沒有SequentialAnimation on circlrColor的用法，這裡是直接作用于顔色【很多QML的騷用法在文檔裡都找不到，這也是我認為阻擋我學習QML的難處】

6、main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

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

    Background {
        id: background
        anchors.fill: parent

        Recver {
            id: recver
            x: 359
            y: 128
            circlrColor: "#ff0000"
            contentText: "Recver"
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: parent.verticalCenter
        }

        Sender {
            id: sender
            x: 79
            y: 140
            target: recver
            circlrColor: "#0000ff"
            contentText: "Sender"
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }
}      

Background可不管，就是個簡單的背景qml

長風破浪會有時，直挂雲帆濟滄海！