码迷,mamicode.com
首页 > 其他好文 > 详细

QML小例子【信号与槽】

时间:2019-08-03 18:52:55      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:enter   alias   可变   顺序   htm   别名   anim   nta   注意   

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

QML小例子【信号与槽】

标签:enter   alias   可变   顺序   htm   别名   anim   nta   注意   

原文地址:https://www.cnblogs.com/judes/p/11295762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!