QT：完整的人机五子棋设计(二)布局

2.2主窗口布局

主窗口主要包含棋盘、玩家信息、按键、图片信息。

在前边的设计中，已经具备了棋盘控件。棋盘制作传送门：QT：完整的人机五子棋设计(一)棋盘

接下来就需要把棋盘整合进主窗口。那么添加呢，原先棋盘是纯代码绘制的，而我们主窗口采用ui设计，这就凸显好处了，只需要在新的总工程师中添加棋盘类文件即可。

2.2.1创建总工程

新建一个与棋盘一样继承于QWidget的工程，只是多添加一个ui文件；把棋盘类的头文件和源文件添加到工程目录中，对应于Headers和Sources。

2.2.2添加棋盘

由于主窗口没有直接添加子部件的接口，所以需要在设计模式中对ui进行布局，如下所示，双击ui文件进入设计模式，添加一个水平布局部件，调整到合适大小并修改目标名称。

在代码定义处，定义一个棋盘实例，通过水平布局部件接口添加棋盘。

  1 // 定义棋盘实例
  2 chessboard = new ChessBoard();
  3 // 把棋盘添加到水平布局中
  4 ui->chessBoardLayout->addWidget(chessboard);

2.2.3添加玩家信息

对左半边布局如下。其中所有的显示都是使用的Label标签，由于有些标签默认没有显示，所以看不见。其中相同颜色序号表示使用了Layouts布局，而布局是不显示的控件，它们能嵌套处理。同理对周边部件做同样布局处理，最后我们整合成一个大的布局，这样我们所有的部件排版的框架就搭建出来了。对于不同大小的部件，使用Spaces来填充，即图中弹簧部件。对于我们要在代码运行过程中修改部件属性的，可以修改目标名称以便编程。

代码编程：

重写paintEvent事件，根据ui中的目标名称对玩家头像、昵称、标题板等进行绘制和设置。事先需要准备好资源文件。该部分可以参考棋盘类。

  1 void FiveChess::paintEvent(QPaintEvent *)
  2 {
  3     QPainter painter(this);
  4     QPixmap backGroundPic(QString(":/images/backGround5.png"));
  5     QPen pen;
  6     pen.setWidth(3);
  7     painter.setPen(pen);
  8     painter.drawPixmap(0,0,this->width(),this->height(),backGroundPic);
  9     painter.drawRect(0,0,this->width()-1,this->height()-1);
 10     QPixmap playerPhoto(QString(":/images/player.png"));
 11     QPixmap computerPhoto(QString(":/images/computer.png"));
 12     QPixmap titlePhoto(QString(":/images/title.jpg"));
 13     QPixmap winPic(QString(":/images/win.png"));
 14     QPixmap failPic(QString(":/images/fail.png"));
 15     ui->gameTitleLabel->setScaledContents(true);
 16     ui->gameTitleLabel->setPixmap(titlePhoto);
 17 
 18     ui->playerLabel->setScaledContents(true);
 19     ui->playerLabel->setPixmap(playerPhoto);
 20     ui->playerNameLabel->setText("小懒虫");
 21 
 22     ui->computerLabel->setScaledContents(true);
 23     ui->computerLabel->setPixmap(computerPhoto);
 24     ui->computerNameLabel->setText("电脑玩家");
 25     // 该部分为游戏结束时的结果显示
 26     if (gameOverPromptFlag == true && resultLabel != NULL)
 27     {
 28         if(chessboard->isEnabled() == true)
 29             resultLabel->setVisible(true);
 30         resultLabel->resize(winPic.width(), winPic.height());
 31         resultLabel->move(this->width() /2 - resultLabel->width() /2,
 32                           this->height()/2 - resultLabel->height()/2);
 33         if(winner == player)resultLabel->setPixmap(winPic);
 34         else resultLabel->setPixmap(failPic);
 35         chessboard->setEnabled(false);
 36     }
 37     //this->update();
 38 }

paintEvent(QMouseEvent *e)

2.2.4添加功能按键

拖出4个按键，修改显示文本和目标名称，进行排版。

自此，基本的部件布局就基本完成啦，部件间的排版还需要做微调，这个不熟悉的话只能多花点时间慢慢调整了。