在此之前，整個五子棋游戲的基本功能框架就已經搭建好了，但是界面還不好看，需要做一些調整。
2.4修改樣式
2.4.1文本樣式
文本的樣式可以在設計模式中直接修改font，即文本類，這里修改簡單明了。可以通過Alt+shift+R預覽窗口的文本信息。
2.4.2按鍵樣式
根據上一步修改按鍵字體樣式。
准備一張按鍵的背景圖片，例如上圖，我用是PNG圖片，能夠透明；把准備的圖片用PS調整亮度，依次保存成常規顯示、鼠標停留顯示、鼠標點擊顯示、按鍵禁能顯示四張背景圖片；把圖片添加到資源文件當中。
修改按鍵的樣式：
依然通過設計模式來進行修改，如下圖。
在打開的樣式表中，點擊添加資源，選擇Board-image，選擇添加的資源文件中的文件。然后棕紅色部分需要自己添加。
QPushButton代表樣式應用於按鍵
QPushButton:hover鼠標移動到按鍵上
QPushButton:pressed鼠標點擊按鍵
QPushButton:disabled按鍵禁能
添加樣式后，鼠標執行上述相關的操作，按鍵的背景會根據樣式中資源文件變動。通過預覽，可以看到操作的變化。
這里的樣式簡單的顯示不同背景，還可以進行其他的樣式設計，QT的樣式使用的是HTML的css的語法，要想豐富使用還需要學習css的語法。
1 QPushButton{border-image:url(:/images/btnBG.png);padding:0px;border:none} 2 QPushButton:hover{border-image:url(:/images/btnBG_hover.png)} 3 QPushButton:pressed{border-image:url(:/images/btnBG_press.png)} 4 QPushButton:focus:hover{border-image:url(:/images/btnBG_hover.png)} 5 QPushButton:focus:pressed{border-image:url(:/images/btnBG_press.png)} 6 QPushButton:disabled{border-image:url(:/images/btnBG_disable.png)}
2.4.3圖片顯示
為整個窗口顯示背景圖片：
在繪畫事件paintEvent中調用畫家的drawPixmap()接口進行繪制。
1 void FiveChess::paintEvent(QPaintEvent *) 2 { 3 QPainter painter(this); 4 QPixmap backGroundPic(QString(":/images/backGround5.png")); 5 painter.drawPixmap(0,0,this->width(),this->height(),backGroundPic); 6 ｝
由於背景顏色邊界不明顯，可以添加個邊框
QPen pen;
pen.setWidth(3);
painter.setPen(pen)
painter.drawRect(0,0,this->width()-1,this->height()-1);
為玩家添加頭像：
1 QPixmap computerPhoto(QString(":/images/computer.png")); 2 ui->computerLabel->setPixmap(computerPhoto);
顯示人機對戰游戲標題、游戲結束提示等方法相同。
2.4.4去掉標題欄
當窗口作為子部件的時候，標題欄是不會顯示的，此處是主窗體的標題欄隱藏方法。
隱藏方法：
setWindowFlags( Qt::FramelessWindowHint);
但是這個屬性設置后，窗口就無法移動了，要想通過鼠標移動窗口，需要自己實現。
實現方法：重寫鼠標移動和鼠標點擊事件。
globalPos();是獲得屏幕的坐標，根據點擊時的坐標與移動時的坐標差值，計算移動位置。
1 void FiveChess::mousePressEvent(QMouseEvent *e) // 鼠標點擊事件 2 { 3 lastPos = e->globalPos(); 4 } 5 void FiveChess::mouseMoveEvent(QMouseEvent *e) // 鼠標移動事件 6 { 7 int xLen = e->globalX() - lastPos.x(); 8 int yLen = e->globalY() - lastPos.y(); 9 lastPos = e->globalPos(); 10 move(x()+xLen, y()+yLen); // 移動窗口 11 }
實現兩個接口后，鼠標按住窗口非子部件位置就可以拖動窗口啦。
2.4.4窗口
美化完就是最終的窗口如下：
