20190409 QT从Button开始(3)

上次已经有EmitButton 这个工程了，为了区分，就叫 RealizeEmitButton  吧  

今天为了讲信号与槽，涉及的知识点有点杂，那就想到哪说哪吧  实现了通过三个Button控制一个gif动画在主界面中的位置，向左、向右、缓缓移动到中心点

首先来看 程序main.cpp

#include

#include"quickwidget.h"  //继承自 QQuickWidget  这个类继承自QWidget  有什么用呢  看这个实现

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QuickWidget widget;
    widget.show();

    return app.exec();
}

 

quickWidget.h

class QuickWidget : public QQuickWidget
{
    Q_OBJECT   // 所有用到信号与槽的类都必须写这个宏 非常重要
public:
    QuickWidget();
    void initConnection();  //实现信号与槽的联系

signals:   //信号
    void moveToLeft();
    void moveToRight();
    void resetCenter();

public slots:  //槽方法
    void closeWindow();
    void leftButtonEvent();
    void centerButtonEvent();
    void rightButtonEvent();

};

quickwidget.cpp

QuickWidget::QuickWidget()
{
    QScreen *screen=qApp->primaryScreen();  //获取当前屏幕尺寸
    rootContext()->setContextProperty("mainWidth",screen->size().width()); //注册到QML中
    rootContext()->setContextProperty("mainHeight", screen->size().height());
    rootContext()->setContextProperty("mainWidthCell",screen->size().width()/64);
    rootContext()->setContextProperty("mainHeightCell", screen->size().height()/36);
    setResizeMode(QQuickWidget::SizeRootObjectToView);
    setSource(QUrl("qrc:/main.qml"));  \\有没有很熟悉的感觉，前面一直在main.cpp 就是通过这句将QML与Widget结和
    setWindowFlags(Qt::FramelessWindowHint);

    initConnection();
}

void QuickWidget::initConnection()
{
    QQuickItem *root = this->rootObject();  //获取QML 作为一个对象

    connect(root,SIGNAL(closeWindow()),this,SLOT(closeWindow()));  //建立槽与信号之间的联系  如影随形

//第一个变量 信号发出者 二发出的信号，三信号接收者，四 信号接收者响应的槽函数

    connect(root,SIGNAL(leftButtonEvent()),this,SLOT(leftButtonEvent()));
    connect(root,SIGNAL(centerButtonEvent()),this,SLOT(centerButtonEvent()));
    connect(root,SIGNAL(rightButtonEvent()),this,SLOT(rightButtonEvent()));

    connect(this,SIGNAL(moveToLeft()),root,SLOT(moveToLeft()));
    connect(this,SIGNAL(moveToRight()),root,SLOT(moveToRight()));
    connect(this,SIGNAL(resetCenter()),root,SLOT(resetCenter()));

}

void QuickWidget::closeWindow()
{
    this->close();
}

void QuickWidget::leftButtonEvent()
{
    qDebug()<     emit moveToLeft();
}

void QuickWidget::centerButtonEvent()
{
     qDebug()<      emit resetCenter();
}

void QuickWidget::rightButtonEvent()
{
     qDebug()<      emit moveToRight();

//  在 C++ 下  信号的需要   emit   触发    在QML 中 只用写自身就行
}

再看看main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Rectangle {
    id:mainUI
    width: mainWidth   \\在quickWidget 中注册过 现在可以直接使用奥    1920
    height: mainHeight
    Image {
        id: backGroundImage
        z:0  \\层级标志   背景当然在最底层
        source: "qrc:/image/loginBackGround.png"
    }

    CButton{
        id:closeButton
        normalSource: "qrc:/image/close.png"
        hoverSource: "qrc:/image/close_hover.png"

        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.leftMargin: 10
        width: mainWidthCell*2
        height: mainHeightCell*2
    }

    Rectangle{
        id:buttonGroup
        z:1
        CButton{
            id:leftButton
            buttonIndex:0
            currentButtonIndex :0
            buttonText:qsTr("左")
            anchors.left: parent.left  //anchors 布局神器
            anchors.top:  parent.top
            anchors.topMargin: 10
            anchors.leftMargin: 10
            normalSource:"qrc:/image/Button.png"
            hoverSource:"qrc:/image/Button_hover.png"
        }

        CButton{
            id:centerButton
            buttonIndex:1
            currentButtonIndex :0
            buttonText:qsTr("中")
            anchors.left: leftButton.right
            anchors.top:  leftButton.top
            anchors.leftMargin: 10
            normalSource:"qrc:/image/Button.png"
            hoverSource:"qrc:/image/Button_hover.png"
        }

        CButton{
            id:rightButton
            buttonIndex:2
            currentButtonIndex :0
            buttonText:qsTr("右")
            anchors.left: centerButton.right
            anchors.top:  centerButton.top
            anchors.leftMargin: 10
            normalSource:"qrc:/image/Button.png"
            hoverSource:"qrc:/image/Button_hover.png"
        }
    }

    AnimatedImage{  \\动画播放  是不是简单到  心花怒放 播放gif 动画
        id:busyGif
        z:1
        x:parent.width/2 -width/2  \\  不设置大小，就会使用gif文件的大小   x,y 是距左顶点的距离  一个小小的居中
        y:parent.height/2- height/2
        source: "qrc:/image/Busy.gif"

    }

    signal closeWindow()
    signal leftButtonEvent()
    signal centerButtonEvent()
    signal rightButtonEvent()

    function moveToLeft()
    {
        busyGif.x=busyGif.x-50;
    }

    function moveToRight()
    {
        busyGif.x=busyGif.x+50;
    }

    function resetCenter()
    {
      animation.running = true
    }

    PropertyAnimation   \\在 resetCenter中调用  动画移动只需你设置
    {
        id: animation;
        target: busyGif;
        property: "x";
        to: mainUI.width/2 -busyGif.width/2;
        duration: 2000
    }

    function buttonClick( index)   // QML 中定义 函数（方法）  注意  参数不用加类型  js 写法
    {
        leftButton.currentButtonIndex= index
        centerButton.currentButtonIndex= index
        rightButton.currentButtonIndex= index
    }

    Component.onCompleted: {    // QML 信号 与 槽（函数）的连接方法   QtWidgets 会详细介绍这一核心机制
        leftButton.buttonClick.connect(buttonClick)
        centerButton.buttonClick.connect(buttonClick)
        rightButton.buttonClick.connect(buttonClick)

        leftButton.buttonClick.connect(leftButtonEvent)
        centerButton.buttonClick.connect(centerButtonEvent)
        rightButton.buttonClick.connect(rightButtonEvent)

        closeButton.buttonClick.connect(closeWindow)
    }
}

CButton.qml

Rectangle {
    color: "#00000000"
    width: 200
    height: 50
    id:cButton

    signal buttonClick(int index)  // QML 信号的声明

    property int buttonIndex: -1 //这里做了修改，不言而明
    property int currentButtonIndex: 0 //buttonGroup 序号

}