qt creator 帮助文档_看Qt帮助文档自学Qt---界面设计制作2048小游戏(2) day9

最新推荐文章于 2021-12-23 23:21:13 发布

weixin_39644325

最新推荐文章于 2021-12-23 23:21:13 发布

阅读量171

点赞数

文章标签： qt creator 帮助文档 qt中的qwidget如何实现自定义部件

其实内容与标题有点不符合，渐渐脱离了主题 看Qt帮助文档自学Qt

但是有点强迫症，所有的系列在一块看着比较舒服所以就不改了

看的这个2048小游戏的例子 github的连接在day8里面

从来没写过游戏，让我自己写真是。。。一点思路都没有

这不在github 找了个例子研究了两天（中间打打王者），害

终于把逻辑看的差不多了（我比较苯，这是真的）

正文：

完整游戏的界面是这样的

你要是不知道QWidget，还有QPushButton，QLabel这些最基础的东东，可以去帮助文档，搜一下或者B站看一个教学视频，因为我觉得很简单就是一些概念，所以前面就没写这部分的东西，帮助文档在这

继续之前

仔细看看这个主界面应该由两个部分构成，一个是QWidget（就是整个窗口，相当于一个容器）然后那些块块像是QPushButton也可以是QLabel，对吧

意思就是这个图我们要画一个GameBoard，这个GameBoard的内容就是一个个排列有序的Grid，GameBoard就是QWidget（我们要给它加好多个Grid和计分的部分），Grid就是QLabel（后期我们要为QLabel设置内容比如2 4 8 16 还有背景颜色深浅还要“移动”它）

Grid  格子
Board  板 在这就是画板 游戏主界面

思路终于理清，现在要做的就是，写出Grid这个类，和GameBoard这个类，然后画Grid，再画GameBoard，最后把Grid放到GameBoard上就ok了，下面是我照着例子写的

既然上面说了我们要画GameBoard和Grid了，所以肯定要分别创建这两个类了，类名无所谓关键是你知道是啥，能记住，因为后面还有好多类

我是 add new... -> C++ Class -> Basic class两个都选择QWidget，然后进Grid的头文件，把继承自QWidget改成QLabel，既然这改了，头文件包含，对应的构造函数的参数都要改吧，不然会报错，感觉也都知道，，，哈哈

先看，怎么画Grid(格子)

头文件 qgrid.h

#ifndef GRID_H
#define GRID_H

#include <QLabel>
//画图用的格子是QGrid
class QGrid : public QLabel
{
    Q_OBJECT
public:
    explicit QGrid(const QString &text);
    void Draw();
private:
    QString title_;//暂时写这个之后会改
signals:

};

#endif // GRID_H

看没有什么，就一个构造函数用来初始化它的成员title_（就是格子上显示的数字 2 4 6 8 ）

还有一个Draw（）函数，它是用来画Grid的，比如背景颜色，格子的大小，形状

.cpp文件 qgrid.cpp

#include "qgrid.h"

QGrid::QGrid(const QString &text)
{
    setAlignment(Qt::AlignCenter);
    this->title_ = text;
}

void QGrid::Draw()
{
    setText(title_);
    setStyleSheet("QGrid { background: rgb(238,228,218); color: rgb(119,110,101); font: bold; border-radius: 10px; font: 40pt; }");
}

不要忘了我们的QGrid是继承自QLabel的，所以Draw函数里面的setText（）函数就是设置QLabel的内容，setStyleSheet就是设置QLabel的背景颜色，字体颜色，边框的形状等

需要注意的是 setStyleSheet（）参数的第一个单词是它将作用的类的名字不要填错了，我们这就应该填我们格子（QGrid）的名字，因为我们要画的就是它，画格子嘛

现在画格子的任务算是做完了吧，下一步是要做什么来着？（动动你的小脑袋）

我们要把这一个个的Grid放进一个板子上，但是放板子上能是随便放的吗？比如一列有几个格子（Grid），一行有几个？这都需要我们作出一些规则，告诉它们应该怎么放。

所以下一步我们要整个GameBoard（相当于一个画板），它继承QWidget，所以它有个属性就是布局（Layout），通过setLayout我们可以为它规定，这个容器应该怎么放这些小Widget也就是我们的Grid（格子）

别忘了我们自定义的 QGrid（格子）继承QLabel（顺便提一下，QLabel是QWidget的孙女，不信？去查查帮助文档）

想想我们要创建的这个类应该有哪些成员？（变量，函数）

是不是我们要把那些格子放到板子上？怎么放？抽象出来就是我们得搞个数组来放，一维数组行吗？我们不是一行，而是多行，所以得是个二维数组来存储这些格子（Grid）

还需要啥？画格子（Grid）有一个Draw（）函数，我们还得画板子呢，所以需要一个DrawGrid()，注意这里Grid是网格的意思（你可以改成你容易记住的名字）

来看看头文件吧

头文件 qgameboard.h

#ifndef GAMEBOARD_H
#define GAMEBOARD_H

#include <QWidget>

class QGridLayout;
class QVBoxLayout;
class QLabel;
class QGrid;

class QGameBoard : public QWidget
{
    Q_OBJECT
public:
    explicit QGameBoard(QWidget *parent = nullptr);
    ~QGameBoard();

signals:

public slots:
    void ResetBoard();

private:
    QVector<QVector<QGrid*>> gui_grid_;//int will be change later
    QVBoxLayout *main_layout_;
    QGridLayout *grid_layout_;
    QLabel *score_;
    void DrawGrid();

protected:
    void keyPressEvent(QKeyEvent *event);
};

#endif // GAMEBOARD_H

这里面的一些暂时用不到，比如void keyPressEvent(QKeyEvent *event);这是什么？

day8专门将这个的（按键事件），我们暂时不用，因为我们现在的目的是为了画出游戏的样子，为了捋清思路，功能之后再实现。

需要注意的是下面这几行我们画的不是一行，肯定得

QVector<QVector<QGrid*>> gui_grid_;//存Grid
QVBoxLayout *main_layout_;//最大的布局  就是用来布局网格和计分区域
QGridLayout *grid_layout_;//网格布局  用来布局那些Grid

QVBoxLayout是什么？QGridLayout呢？

建议搜搜Qt帮助文档，我就不写了，因为要是写文档翻译，又写代码分析，额我还想多打会王者。。。。

好吧，还是写一个吧，说说QVBoxLayout

The QVBoxLayout class lines up widgets vertically. This class is used to construct vertical box layout objects. See QBoxLayout for details. The simplest use of the class is like this:

QVBoxLayout类将小部件垂直排列。这个类用于构造垂直框布局对象。这个类最简单的用法是这样的:

vertically  垂直地  对应的是 horizontal  水平的  （总是容易记混）
lines up  排队 排列

（多说一句，你看人家官方说了，QVBoxLayout是排列Widget的，可不是随便你造个类人家就能给你排列，为什么能排我们的Grid，因为Grid是QWidget的重孙女，你说我们的Grid是不是QWidget）

     QWidget *window = new QWidget;
     QPushButton *button1 = new QPushButton("One");
     QPushButton *button2 = new QPushButton("Two");
     QPushButton *button3 = new QPushButton("Three");
     QPushButton *button4 = new QPushButton("Four");
     QPushButton *button5 = new QPushButton("Five");

     QVBoxLayout *layout = new QVBoxLayout;
     layout->addWidget(button1);
     layout->addWidget(button2);
     layout->addWidget(button3);
     layout->addWidget(button4);
     layout->addWidget(button5);

     window->setLayout(layout);
     window->show();

First, we create the widgets we want in the layout. Then, we create the QVBoxLayout object and add the widgets into the layout. Finally, we call QWidget::setLayout() to install the QVBoxLayout object onto the widget.

首先，1我们在布局中创建需要的小部件。然后，我们2创建QVBoxLayout对象并将小部件添加到布局中。最后，我们3调用QWidget::setLayout()来将QVBoxLayout对象安装到小部件上。

效果图

最后只剩：

qgameboard.cpp

#include "gui/qgameboard.h"
#include "gui/qgrid.h"

#include <QVBoxLayout>
#include <QGridLayout>
#include <QLabel>
#include <QKeyEvent>
#include <QString>
#include <QDebug>

QGameBoard::~QGameBoard()
{


}
//构造函数 一切的开始 生命的源头
QGameBoard::QGameBoard(QWidget *parent) : QWidget(parent)
{
    resize(650,450);//设置游戏窗口大小
    main_layout_ = new QVBoxLayout();//创建个垂直布局对象，并给我们的板子安排上
             //我们想让板子GameBoard上面放着整个排好的格子，下面放计分的地方，所以需要 main_layout
    setLayout(main_layout_);//立刻安排
    grid_layout_ = nullptr;//还记得吗？这个是为怎么排列格子而准备的，几行几列

    gui_grid_.resize(4);//别忘了 gui_grid_是个二维数组，让它有四行
    for(int i = 0;i<4;++i)//有四列
        gui_grid_[i].resize(4);//结果可以存4*4个格子Grid

    for(int i=0;i<4;++i)//all grids be assigned 0
        for(int j=0;j<4;++j)
            gui_grid_[i][j] = nullptr;
    DrawGrid();//这行代码很重要 

    setStyleSheet("QGameBoard { background-color: rgb(187,173,160) }");//设置板子的背景
}

void QGameBoard::DrawGrid()
{
    delete grid_layout_;//为什么要删一次？额但在这我们也可以不删，但为了以后每次移动都会重新画图，所以才先写上，别忘了
    grid_layout_ = new QGridLayout();//看，现在用到了吧，四行四列的于显示，就是这个网格布局帮的忙
    QString title = "2";

    for(int i=0;i<4;++i)
        for(int j=0;j<4;j++){
            delete gui_grid_[i][j];//删的原因同上
            gui_grid_[i][j] = new QGrid(title);//不知道发生了什么的话，就去上面看看QGrid的构造函数吧
            grid_layout_->addWidget(gui_grid_[i][j],i,j);//draw QGameBoard 看就在这 我们为每一个格子 安排一个小家
            gui_grid_[i][j]->Draw();//draw QGrid 看我们为每一个格子（Grid）打扮 化妆
        }
    main_layout_->insertLayout(0, grid_layout_);//important if not won't display anything//看我们把这一群小家伙放到了我们的板子上方
}

void QGameBoard::ResetBoard()
{

}

void QGameBoard::keyPressEvent(QKeyEvent *event){

}

最后：我把项目文件放这，你可以参考参考

用Qt打开文件夹里的.pro文件就行了

提取密码: ukpl

https://pan.baidu.com/s/1UNpZ8-CrmVQ3XEycgKxyOgpan.baidu.com

weixin_39644325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qt creator 帮助文档_看Qt帮助文档自学Qt---界面设计制作2048小游戏(2) day9

其实内容与标题有点不符合，渐渐脱离了主题看Qt帮助文档自学Qt但是有点强迫症，所有的系列在一块看着比较舒服所以就不改了看的这个2048小游戏的例子 github的连接在day8里面从来没写过游戏，让我自己写真是。。。一点思路都没有这不在github 找了个例子研究了两天（中间打打王者），害终于把逻辑看的差不多了（我比较苯，这是真的）正文：完整游戏的界面是这样的你要是不知道QWi...
复制链接

扫一扫