主窗口主要包含棋盘、玩家信息、按键、图片信息。
在前边的设计中，已经具备了棋盘控件。棋盘制作传送门：QT：完整的人机五子棋设计(一)棋盘
接下来就需要把棋盘整合进主窗口。那么添加呢，原先棋盘是纯代码绘制的，而我们主窗口采用ui设计，这就凸显好处了，只需要在新的总工程师中添加棋盘类文件即可。
新建一个与棋盘一样继承于QWidget的工程，只是多添加一个ui文件；把棋盘类的头文件和源文件添加到工程目录中，对应于Headers和Sources。
由于主窗口没有直接添加子部件的接口，所以需要在设计模式中对ui进行布局，如下所示，双击ui文件进入设计模式，添加一个水平布局部件，调整到合适大小并修改目标名称。
在代码定义处，定义一个棋盘实例，通过水平布局部件接口添加棋盘。
1 // 定义棋盘实例 2 chessboard = new ChessBoard(); 3 // 把棋盘添加到水平布局中 4 ui->chessBoardLayout->addWidget(chessboard);
对左半边布局如下。其中所有的显示都是使用的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 }
拖出4个按键，修改显示文本和目标名称，进行排版。
自此，基本的部件布局就基本完成啦，部件间的排版还需要做微调，这个不熟悉的话只能多花点时间慢慢调整了。
原文：https://www.cnblogs.com/alex-space/p/13369802.html
