简述

在自定义无边框、标题栏的界面中，需要自己实现最小化、最大化、关闭、窗体背景等功能。最小化、最大化、关闭等按钮设计及功能比较简单，这里就不多做介绍。今天主要介绍一下绘制背景的问题，主要实现自适应屏幕分辨率。

• 简述
• 实现
  • 自适应方案
  • 效果
  • 源码

实现

先看一下UI设计的图（大小：1298*786）：

自适应方案

如何自适应屏幕分辨率呢？下面是常用的一些方案：

1. 为每个分辨率单独做一张图
2. 将图片切分为九宫格形
3. 在原图基础上进行实现

下面，我们分别对它们一一进行分析：

1. 常用的分辨率很多，800*600、1024*768、1280*800、1680*1050等等。。。那么得需要多少张图呢？而且资源一旦过多，会加大程序开销。
2. 需要将图片切分，而且如果切分不合适，还得来回重复切图，加大UI工作量。。。
3. 在原图的基础上实现，在代码逻辑上处理！

综上所述：很明显，方案3是最好的，那么如何实现呢？请继续往下看！

由于界面存在缩放，所以如果窗体有圆角、或者存在阴影效果，缩放过程中会变形，所以需要进行特殊化处理！

1. 左上角、左下角、右上角、右下角进行切分分别绘制（下面所说的切分都使用代码实现）
2. 左、上、右、下部位进行切分，计算出窗体的大小后，在原方向进行拉伸
3. 中央部分切分出一部分进行平铺
4. 让UI将圆角及阴影部分标注出来，这里需要标注宽和高，以便于实现切图。

效果

源码

现在，来开始我们的代码之旅吧！

void paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    QPixmap background(":/background");

    int nLeftWidth = 144;
    int nBottomHeight = 24;
    int nTopHeight = 67;

    // 分别计算左、上、右、下的区域
    QRect left(0, 100, nLeftWidth, 100);
    QRect right(background.width() - nLeftWidth, 100, nLeftWidth, 100);
    QRect leftTop(0, 0, nLeftWidth, nTopHeight);
    QRect rightTop(background.width() - nLeftWidth, 0, nLeftWidth, nTopHeight);
    QRect top(150, 0, 150, nTopHeight);
    QRect leftBottom(0, background.height() - nBottomHeight, nLeftWidth, nBottomHeight);
    QRect rightBottom(background.width() - nLeftWidth, background.height() - nBottomHeight, nLeftWidth, nBottomHeight);
    QRect bottom(150, background.height() - nBottomHeight, 100, nBottomHeight);
    QRect center(300, 300, 100, 100);

    QRect leftRect(0, nTopHeight, nLeftWidth, this->height() - nTopHeight - nBottomHeight);
    QRect rightRect(this->width() - nLeftWidth, nTopHeight, nLeftWidth, this->height() - nTopHeight - nBottomHeight);
    QRect leftTopRect(0, 0, nLeftWidth, nTopHeight);
    QRect rightTopRect(this->width() - nLeftWidth, 0, nLeftWidth, nTopHeight);
    QRect topRect(nLeftWidth, 0, this->width() - nLeftWidth*2, nTopHeight);
    QRect leftBottomRect(0, this->height() - nBottomHeight, nLeftWidth, nBottomHeight);
    QRect righttBottomRect(this->width() - nLeftWidth, this->height() - nBottomHeight, nLeftWidth, nBottomHeight);
    QRect bottomRect(nLeftWidth, this->height() - nBottomHeight, this->width() - nLeftWidth*2, nBottomHeight);
    QRect centerRect(nLeftWidth, nTopHeight, this->width() - nLeftWidth*2, this->height() - nTopHeight - nBottomHeight);

    // 绘制图片
    painter.drawPixmap(topRect, background, top);
    painter.drawPixmap(leftRect, background, left);
    painter.drawPixmap(rightRect, background, right);
    painter.drawPixmap(rightTopRect, background, rightTop);
    painter.drawPixmap(leftTopRect, background, leftTop);
    painter.drawPixmap(leftBottomRect, background, leftBottom);
    painter.drawPixmap(righttBottomRect, background, rightBottom);
    painter.drawPixmap(bottomRect, background, bottom);
    painter.drawPixmap(centerRect, background, center);
}

关于缩放处理，请参考：

• Qt之自定义界面（实现无边框、可移动）
• Qt之自定义界面（窗体缩放-跨平台终极版）
• Qt之自定义界面（窗体缩放）