Qt_C++ 制作翻硬币游戏（3）实现选择界面的功能（根据按钮跳转关卡功能除外）

选择界面功能（根据按钮跳转关卡功能除外）：

        1.实现back按钮，两种不同状态的切换

        2.实现back按钮的返回功能

        3.实现关卡按钮的布局

一.实现back按钮，两种不同状态的切换

        实现按钮不同状态的切换，使用鼠标事件进行完成（在mypushbutton定义），通过pressImgPath是否为空进行下一步判断，不为空时才存在状态切换。

//判断pressImgPath是否为空不为空则进行以下操作

//加载按下的图片

//设置按钮大小

//设置按钮不规则形状的风格

//将图片设置在按钮上

//设置图片大小

//将其他事件交给父类进行处理

void mypushbutton::mousePressEvent(QMouseEvent *e)
{
    if(this->pressImgPath != "")//来判断是否需要进行两张图片的切换
    {
        QPixmap pix;
        bool ret=pix.load(this->pressImgPath);
        if(!ret)
        {
            qDebug()<<"图片错误";
            return;
        }
        this->setFixedSize(pix.width(),pix.height());
        this->setStyleSheet("QPushButton{border:0dx;}");
        this->setIcon(pix);
        this->setIconSize(QSize(pix.width(),pix.height()));
    }
    return QPushButton::mousePressEvent(e);
}

void mypushbutton::mouseReleaseEvent(QMouseEvent *e)
{
    if(this->pressImgPath != "")
    {
        QPixmap pix;
        bool ret = pix.load(this->normalImgPath);
        if(!ret)
        {
            qDebug()<<"图片有误";
            return;
        }
        this->setFixedSize(pix.width(),pix.height());
        this->setStyleSheet("QPushButton{border:0dx;}");
        this->setIcon(pix);
        this->setIconSize(QSize(pix.width(),pix.height()));
    }
    return QPushButton::mouseReleaseEvent(e);

}

二.实现back按钮的返回功能

        自定义一个信号，使主页面一直监控这个信号void chooseBtnBack()【在chooseSence.h中声明，不需要实现】

#ifndef CHOOSESCENCE_H
#define CHOOSESCENCE_H

#include <QMainWindow>

class chooseScence : public QMainWindow
{
    Q_OBJECT
public:
    explicit chooseScence(QWidget *parent = nullptr);

    //重写绘画事件进而添加背景图片
    void paintEvent(QPaintEvent *event);

signals:
    //创建自定义信号，只需要声明
    void chooseBtnBack();
};

当点击back按钮时，发出这个信号

 //实现back按钮的功能,自定义一个信号，使主页面实时监控并作出改变
    connect(backBtn,&mypushbutton::clicked,[=](){
        //发送信号
        emit this->chooseBtnBack();
    });

在home.cpp中监控这个信号

 //创建选择关卡界面对象
    chooseScence *choose=new chooseScence;
    //back按钮按下返回主页面
    connect(choose,&chooseScence::chooseBtnBack,[=](){
        QTimer::singleShot(500,this,[=](){
            choose->hide();
            this->show();
        });

    });

三.实现关卡按钮的布局

        使用一个for循环生成一个4x5的矩阵，行%，列/。使用QLable添加关卡数字

  //创建选择关卡的按钮,使用一个for循环实现一个矩阵
    for(int i=0;i<20;++i)
    {
        //创建按钮
        mypushbutton * chooseBtn=new mypushbutton(":/res/LevelIcon.png");
        chooseBtn->setParent(this);//将按钮放置到窗口中
        chooseBtn->move(25+i%4*70,130+i/4*70);

        //将按钮上添加数字
        //使用label添加
        QLabel * myLabel =new QLabel(this);
        myLabel->setFixedSize(chooseBtn->width(),chooseBtn->height());//设置myLabel的大小与按钮一样大
        myLabel->setText(QString::number(i+1));//生成数字
        myLabel->move(25+i%4 * 70,130+i/4 * 70);//移动数字的位置使其与按钮位置一致
        //将数字在一个lable区域内对齐
        myLabel->setAlignment(Qt::AlignCenter);

        //点击按钮发现鼠标事件因为lable的覆盖不能作用与按钮上
        //所以要将鼠标事件进行穿透
        myLabel->setAttribute(Qt::WA_TransparentForMouseEvents);

        //验证是否鼠标事件是否作用到按钮上
        connect(chooseBtn,&mypushbutton::clicked,[=](){
            QString str=QString("选择的关卡为第%1关").arg(i+1);
            qDebug()<<str;
        });