Qt入门系列（四）

用户9831583

发布于 2022-06-16 15:26:29

9360

发布于 2022-06-16 15:26:29

文章被收录于专栏：码出名企路

文章首发在博主知乎

1.项目简介

翻金币

2.项目资源配置

新建一个QMainWindow，将资源文件添加进去

3.主场景设置

ui上添加开始，退出菜单

1.添加背景图

w.cpp中添加代码：

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //配置主场景
    //设置固定大小
    setFixedSize(320,588);

    //设置图标
    setWindowIcon(QIcon(":/res/Coin0001.png"));

    //设置标题
    setWindowTitle("翻金币主场景");

    //退出按钮实现
    connect(ui->action,&QAction::triggered,[=](){
        this->close();
    });

}

 void MainWindow::paintEvent(QPaintEvent *)
 {
    QPainter painter(this);
    QPixmap pix;
    pix.load(":/res/PlayLevelSceneBg.png");
    painter.drawPixmap(0,0,this->width(),this->height(),pix);

    //画背景图标
    pix.load(":/res/Title.png");
    //缩放图片
    pix=pix.scaled(pix.width()*0.5,pix.height()*0.5);
    painter.drawPixmap(10,30,pix);
 }

结果显示：

2.添加开始按钮

添加一个class C++: myPushButton简称mB

把继承的父亲Widget改为QPushButton,总共改了三处

在mB.cpp中添加实现：

#include "mypushbutton.h"#include <QDebug>#include <QPropertyAnimation>
//myPushButton::myPushButton(QWidget *parent) : QPushButton(parent)
//{

//}

myPushButton::myPushButton(QString normalImg, QString pressImg)
{
    this->normallImgPath=normalImg;
    this->pressImgPath=pressImg;

    QPixmap pix;
    bool ret=pix.load(normalImg);

    if(!ret)
    {
        qDebug()<<"加载失败";
        return;
    }
    //设置图片固定大小
    this->setFixedSize(pix.width(),pix.height());
    //设置不规则图片样式
    this->setStyleSheet("QPushButton(border:0px;)");
    //设置图标
    this->setIcon(pix);
    //设置图标大小
    this->setIconSize(QSize(pix.width(),pix.height()));
}

//向上弹跳
void myPushButton::zoom1()
{
    QPropertyAnimation *animaltion=new QPropertyAnimation(this,"geometry");
    //设置动画时间间隔
    animaltion->setDuration(200);
    //开始位置
    animaltion->setStartValue(QRect(this->x(),this->y(),this->width(),
                                    this->height()));
    //结束位置
    animaltion->setEndValue(QRect(this->x(),this->y()+10,this->width(),
                                  this->height()));

    //设置弹跳曲线
    animaltion->setEasingCurve(QEasingCurve::OutBounce);

    //开始执行动画
    animaltion->start();
}
void myPushButton::zoom2()
{
    QPropertyAnimation *animaltion=new QPropertyAnimation(this,"geometry");
    //设置动画时间间隔
    animaltion->setDuration(200);
    //开始位置
    animaltion->setStartValue(QRect(this->x(),this->y()+10,this->width(),
                                    this->height()));
    //结束位置
    animaltion->setEndValue(QRect(this->x(),this->y(),this->width(),
                                  this->height()));
    //设置弹跳曲线
    animaltion->setEasingCurve(QEasingCurve::OutBounce);
    //开始执行动画
    animaltion->start();
}

在w.cpp中添加代码：

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //配置主场景
    //设置固定大小
    setFixedSize(320,588);

    //设置图标
    setWindowIcon(QIcon(":/res/Coin0001.png"));

    //设置标题
    setWindowTitle("翻金币主场景");

    //退出按钮实现
    connect(ui->action,&QAction::triggered,[=](){
        this->close();
    });

    //开始按钮
    myPushButton *startBtn=new myPushButton(":/res/MenuSceneStartButton.png");
    startBtn->setParent(this);
    startBtn->move(this->width()*0.5-startBtn->width()*0.5,this->height()*0.7);

    connect(startBtn,&myPushButton::clicked,[=](){
       // qDebug()<<"点击开始";
        startBtn->zoom1();;
        startBtn->zoom2();
    });


}

 void MainWindow::paintEvent(QPaintEvent *)
 {
    QPainter painter(this);
    QPixmap pix;
    pix.load(":/res/PlayLevelSceneBg.png");
    painter.drawPixmap(0,0,this->width(),this->height(),pix);

    //画背景图标
    pix.load(":/res/Title.png");
    //缩放图片
    pix=pix.scaled(pix.width()*0.5,pix.height()*0.5);
    painter.drawPixmap(10,30,pix);
 }

结果显示：

3.开始按钮跳入关级

新建一个class C++:ChoselevelScence,简称cs,继承QMainWIndow

在cs.cpp中实现关卡背景等


ChooseLevelScence::ChooseLevelScence(QWidget *parent) : QMainWindow(parent)
{
   //配置选择关卡场景
    this->setFixedSize(320,588);
    //设置图标
    this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
    //设置标题
    this->setWindowTitle("选择关卡场景");

    //设置菜单栏
    QMenuBar *bar=menuBar();
    setMenuBar(bar);

    //创建开始菜单
    QMenu *startMenu=bar->addMenu("开始");

    //创建退出项
    QAction *quitAction=startMenu->addAction("退出");

    //点击退出，实现退出游戏
    connect(quitAction,&QAction::triggered,[=](){
        this->close();
    });

    //返回按钮
    myPushButton *backBtn=new myPushButton(":/res/BackButton.png",":/res/BackButtonSelected.png");
    backBtn->setParent(this);

    backBtn->move(this->width()-backBtn->width(),this->height()-backBtn->height());
    //点击返回
    connect(backBtn,&myPushButton::clicked,[=](){
        qDebug()<<"点击类返回按钮";
    });

}

  void ChooseLevelScence::paintEvent(QPaintEvent *)
  {
      //加载背景
       QPainter painter(this);
       QPixmap pix;
       pix.load(":/res/OtherSceneBg.png");
       painter.drawPixmap(0,0,this->width(),this->height(),pix);

       //加载标题
       pix.load(":/res/Title.png");
       painter.drawPixmap((this->width()-pix.width())*0.5,30,pix.width(),pix.height(),pix);


  }

在m.cpp中添加代码：


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //配置主场景
    //设置固定大小
    setFixedSize(320,588);

    //设置图标
    setWindowIcon(QIcon(":/res/Coin0001.png"));

    //设置标题
    setWindowTitle("翻金币主场景");

    //退出按钮实现
    connect(ui->action,&QAction::triggered,[=](){
        this->close();
    });

    //开始按钮
    myPushButton *startBtn=new myPushButton(":/res/MenuSceneStartButton.png");
    startBtn->setParent(this);
    startBtn->move(this->width()*0.5-startBtn->width()*0.5,this->height()*0.7);

    chooseScence=new ChooseLevelScence;

    connect(startBtn,&myPushButton::clicked,[=](){
       // qDebug()<<"点击开始";
        startBtn->zoom1();;
        startBtn->zoom2();

        //进入选择关卡界面
        //延时进入到
        QTimer::singleShot(500,this,[=](){
            //自身隐藏
            this->hide();
            //显示选择关卡
            chooseScence->show();
        });


    });


}

 void MainWindow::paintEvent(QPaintEvent *)
 {
    QPainter painter(this);
    QPixmap pix;
    pix.load(":/res/PlayLevelSceneBg.png");
    painter.drawPixmap(0,0,this->width(),this->height(),pix);

    //画背景图标
    pix.load(":/res/Title.png");
    //缩放图片
    pix=pix.scaled(pix.width()*0.5,pix.height()*0.5);
    painter.drawPixmap(10,30,pix);
 }

结果显示：

4.返回按钮的图片切换

在mB.cpp中重新鼠标按下和释放事件


void myPushButton::mousePressEvent(QMouseEvent *e)
{
    //传入的图片不为空，说明有切换操作
    if(this->pressImgPath != " ")
    {
        QPixmap pix;
        bool ret=pix.load(this->pressImgPath);

        if(!ret)
        {
            qDebug()<<"000";
            qDebug()<<"加载失败";
            return;
        }
        //设置图片固定大小
        this->setFixedSize(pix.width(),pix.height());
        //设置不规则图片样式
        this->setStyleSheet("QPushButton(border:0px;)");
        //设置图标
        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->normallImgPath);

        if(!ret)
        {
            qDebug()<<"加载失败";
            return;
        }
        //设置图片固定大小
        this->setFixedSize(pix.width(),pix.height());
        //设置不规则图片样式
        this->setStyleSheet("QPushButton(border:0px;)");
        //设置图标
        this->setIcon(pix);
        //设置图标大小
        this->setIconSize(QSize(pix.width(),pix.height()));

    }
    //让父类执行其他内容
    return QPushButton::mouseReleaseEvent(e);
}

结果显示：

5.开始场景与选择关卡场景切换

在cs.cpp中添加：

ChooseLevelScence::ChooseLevelScence(QWidget *parent) : QMainWindow(parent)
{
  
    //点击返回
    connect(backBtn,&myPushButton::clicked,[=](){
        qDebug()<<"点击类返回按钮";
        //告诉主场景，我返回了，主场景监听ChooseLevelScence的返回按钮
        //做一个延迟的返回
        QTimer::singleShot(500,this,[=](){
             emit this->chooseScenceBack();
        });

    });

}

在m.cpp中链接：

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{

    //监听选择关卡的返回按钮
    connect(chooseScence,&ChooseLevelScence::chooseScenceBack,this,[=](){
        //将选择关卡场景 进行隐藏
         chooseScence->hide();
         this->show();//重新显示主场景
    });

}

结果显示：

6.选择关卡按钮创建

在cs.cpp中添加

ChooseLevelScence::ChooseLevelScence(QWidget *parent) : QMainWindow(parent)
{
  
    //实现关卡按钮1 2 3 4 5
    //一个for实现一个矩阵
    for(int i=0;i<20;i++)
    {
        myPushButton *menuBtn=new myPushButton(":/res/LevelIcon.png");
        menuBtn->setParent(this);
        menuBtn->move(25+i%4*70,130+i/4*70);

        //监听每个按钮的点击事件
        connect(menuBtn,&myPushButton::clicked,[=](){
            QString str=QString("点击了第 %1 关").arg(i+1);
            qDebug()<<str;

        });

       QLabel *label=new QLabel;
       label->setParent(this);
       label->setFixedSize(menuBtn->width(),menuBtn->height());
       label->setText(QString::number(i+1));
       label->move(25+i%4*70,130+i/4*70);

       //设置label上的文字对齐方式
       label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

       //设置让鼠标进行穿透 51号属性
       label->setAttribute(Qt::WA_TransparentForMouseEvents);

    }

}

结果显示：

7.翻金币场景配置

新建一个class C++：PlayScence,继承QMainWindow，简称ps

在ps.cpp中实现：

PlayScence::PlayScence(int levelNum)
    {
        QString str=QString("").arg(levelNum);
        qDebug()<<str;
        this->levelIndex=levelNum;

        //初始化游戏场景
        this->setFixedSize(320,588);
        this->setWindowIcon(QPixmap(":/res/Coin0001.png"));
        this->setWindowTitle("翻金币场景");

        //设置菜单栏
        QMenuBar *bar=menuBar();
        setMenuBar(bar);
        //创建开始菜单
        QMenu *startMenu=bar->addMenu("开始");

        //创建退出项
        QAction *quitAction=startMenu->addAction("退出");

        //点击退出，实现退出游戏
        connect(quitAction,&QAction::triggered,[=](){
            this->close();
        });

        //返回按钮
        //返回按钮
        myPushButton *backBtn=new myPushButton(":/res/BackButton.png",":/res/BackButtonSelected.png");
        backBtn->setParent(this);

        backBtn->move(this->width()-backBtn->width(),this->height()-backBtn->height());

        //点击返回
        connect(backBtn,&myPushButton::clicked,[=](){
            qDebug()<<"翻金币场景中: 点击类返回按钮";

            QTimer::singleShot(500,this,[=](){
                 emit this->chooseScenceBack();
            });

        });

    }

    void  PlayScence::paintEvent(QPaintEvent *)
    {
        //加载背景
        QPainter painter(this);
         QPixmap pix;
         pix.load(":/res/PlayLevelSceneBg.png");
        painter.drawPixmap(0,0,this->width(),this->height(),pix);

       //加载标题
       pix.load(":/res/Title.png");
       //缩放图片
       pix=pix.scaled(pix.width()*0.5,pix.height()*0.5);
       painter.drawPixmap(10,30,pix);

    }

在cs.cpp里负责监听：

ChooseLevelScence::ChooseLevelScence(QWidget *parent) : QMainWindow(parent)
{

    //实现关卡按钮1 2 3 4 5
    //一个for实现一个矩阵
    for(int i=0;i<20;i++)
    {
        myPushButton *menuBtn=new myPushButton(":/res/LevelIcon.png");
        menuBtn->setParent(this);
        menuBtn->move(25+i%4*70,130+i/4*70);

        //监听每个按钮的点击事件
        connect(menuBtn,&myPushButton::clicked,[=](){
            QString str=QString("点击了第 %1 关").arg(i+1);
            qDebug()<<str;

            //进入游戏场景
            this->hide();//隐藏选关卡场景
            play=new PlayScence(i+1);//创建游戏场景
            play->show();

            connect(play,&PlayScence::chooseScenceBack,[=](){
                this->show();
                delete play;
                play=NULL;
            });

        });

    }
}

结果显示：

8.显示选择关卡数

在ps.cpp中添加代码：

 PlayScence::PlayScence(int levelNum)
    {
     
        //显示当前关卡数
        QLabel *label=new QLabel;
        label->setParent(this);
        QFont font;
        font.setFamily("华文新魏");
        font.setPointSize(20);
        QString str1=QString("Level: %1").arg(this->levelIndex);
        //将字体设置到标签控件中
        label->setFont(font);
        label->setText(str1);
        label->setGeometry(30,this->height()-50,120,50);

    }

结果显示：