在此之前，整个五子棋游戏的基本功能框架就已经搭建好了，但是界面还不好看，需要做一些调整。
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窗口
美化完就是最终的窗口如下：
