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 }
2.2.4添加功能按鍵
拖出4個按鍵，修改顯示文本和目標名稱，進行排版。
自此，基本的部件布局就基本完成啦，部件間的排版還需要做微調，這個不熟悉的話只能多花點時間慢慢調整了。