QT 多种状态的背景图片， 放在同一张图上， border-image 进行分割，拉伸

大部份时候的图片是进行了分割，也就是一个控件，背景对应一张状态图片，   当然， 也有意外就是， 有些美工为了省时， 或者说项目为了节省空间，把一个按纽的多种状态的图片放在一张图片上， 这时加载方式就有点不一样了：

  比如说， 这个四张不同状态的图放在了一张图上面。 

我们的处理方法为：

#include "widget.h"

#include "ui_widget.h"

const int Widget::PictureHeight = 176;

const int Widget::Average = (int)176/4;

Widget::Widget(QWidget *parent) :

    QWidget(parent),

    ui(new Ui::Widget)

{

    ui->setupUi(this);

    initButtonImage();

}

Widget::~Widget()

{

    delete ui;

}

void Widget::on_toolButton_clicked()

{

     setStyleSheet(QString("#testButton {border-image:url(%1)%2 0 %3 0}")

                   .arg(":/images/install.png")

                   .arg(0)

                   .arg(PictureHeight - Average)

                   );

}

void Widget::on_toolButton_hover_clicked()

{

     setStyleSheet(QString("#testButton {border-image:url(%1) %2 0 %3 0}")

                   .arg(":/images/install.png")

                   .arg(Average)

                   .arg(PictureHeight - Average*2)

                   );

}

void Widget::on_toolButton_pressed_clicked()

{

    setStyleSheet(QString("#testButton {border-image:url(%1) %2 0 %3 0}")

                  .arg(":/images/install.png")

                  .arg(Average*2)

                  .arg(PictureHeight - Average*3)

                  );

}

void Widget::on_toolButton_disabled_clicked()

{

    setStyleSheet(QString("#testButton {border-image:url(%1) %2 0 %3 0}")

                  .arg(":/images/install.png")

                  .arg(Average*3)

                  .arg(0)

                  );

}

void Widget::initButtonImage()

{

    setStyleSheet(QString("#testButton {border-image:url(%1)0 0 132 0}")

                  .append("#testButton:hover:!pressed {border-image:url(%1)44 0 88 0}")

                  .append("#testButton:hover {border-image:url(%1)88 0 44 0}")

                  .append("#testButton:disabled {border-image:url(%1)132 0 0 0}")

                  .arg(":/images/install.png")

                  );

}

解释一下大概意思：

#testButton {border-image:url(%1) %2 0 %3 0}  这里是QSS 样式的代码， 都短道， 最主要的是后面四个参数， 它们分别代表一张图的 上 右 下 左， 即为
上： 离顶端的距离  下： 离底部的距离
左： 离左边框的距离  右：离右边框的距离

而有四张图合为一张图的， 如果中间没有间距每张图高度相同的话， 为大图的高度/4

拿第张图来讲，它的分割应该为 3倍离底部的平均高度。 
第二张图为从离顶1张小图的高度切割， 再从离底两张图的高度进行分割。 
剩下的两张同样的道理。