Qt-Button使用QSS变图片按钮（QSS图片分割）

相关资料：

https://blog.csdn.net/singleroot/article/details/42492483   QT5分割原文

https://blog.csdn.net/cswxzx/article/details/7195044  QT4分害原文

https://download.csdn.net/download/zhujianqiangqq/13131409   代码包下载

 

mainwinodw.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"


void SetButtonStyle(QPushButton *button, QString imgsrc, int CutSec)
{
    int img_w=QPixmap(imgsrc).width();
    int img_h=QPixmap(imgsrc).height();
    int PicWidth = img_w/CutSec;
    button->setFixedSize(PicWidth,img_h);
    button->setStyleSheet(QString("QPushButton{border-width: 41px; border-image: url(%1)  0 0 0 %2 repeat  repeat;border-width: 0px; border-radius: 0px;}")
      .append("QPushButton::hover{border-image: url(%1) 0 0 0 %3  repeat  repeat;}")
      .append("QPushButton::pressed{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
      .append("QPushButton::checked{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
      .append("QPushButton::disabled{border-image: url(%1) 0  0 0 %5 repeat  repeat;}")
      .arg(imgsrc).arg(0).arg(PicWidth*1).arg(PicWidth*2).arg(PicWidth*3));
}

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 一张图片切图的效果
    SetButtonStyle(ui->pushButton,":/new/prefix1/image/d.png",4);
    // 三张独立的图片
    ui->pushButton_2->setStyleSheet("QPushButton{border-image: url(:/new/prefix1/image/a.png);}"
                                  "QPushButton:hover{border-image: url(:/new/prefix1/image/b.png);}"
                                  "QPushButton:pressed{border-image: url(:/new/prefix1/image/c.png);}");
}

MainWindow::~MainWindow()
{
    delete ui;
}

 

PS:一个扁平按钮QSS样式

    ui->pushButton_2->setStyleSheet("QPushButton{"
                                    "border: 1px solid #C0C0C0;"
                                    "background-color:#C0C0C0;"
                                    "border-radius:10px;"
                                    "}"
                                    "QPushButton:hover{"
                                    "border: 1px solid #E3C46F;"
                                    "background-color:#FEF4BF;"
                                    "border-radius:10px;"
                                    "}"
                                    "QPushButton:pressed{"
                                    "border: 1px solid #AAB4C4;"
                                    "background-color:#EAF0FF;"
                                    "border-radius:10px;"
                                    "}"
                                    );

 

 

QT4实例：

QT4的QSS支持border-image属性,可以用来截取一张图片中的某一部分,比如以下图片

如果我们要取这张图片中的第一个小图,可以用以下代码完成,

border-image: url(":/Resources/btn_close.png") 0 80 0 0 0;
这里的80是指第一个小图的右边到整个图片右边的距离,相应的取第二,第三个小图片的代码如下:

border-image: url(":/Resources/btn_close.png") 0 40 0 40 0;

border-image: url(":/Resources/btn_close.png") 0 0 0 80 0;
详细可参考CSS手册中的border-image用法