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

 1 #include "mainwindow.h"
 2 #include "ui_mainwindow.h"
 3 
 4 
 5 void SetButtonStyle(QPushButton *button, QString imgsrc, int CutSec)
 6 {
 7     int img_w=QPixmap(imgsrc).width();
 8     int img_h=QPixmap(imgsrc).height();
 9     int PicWidth = img_w/CutSec;
10     button->setFixedSize(PicWidth,img_h);
11     button->setStyleSheet(QString("QPushButton{border-width: 41px; border-image: url(%1)  0 0 0 %2 repeat  repeat;border-width: 0px; border-radius: 0px;}")
12       .append("QPushButton::hover{border-image: url(%1) 0 0 0 %3  repeat  repeat;}")
13       .append("QPushButton::pressed{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
14       .append("QPushButton::checked{border-image: url(%1) 0  0 0 %4 repeat  repeat;}")
15       .append("QPushButton::disabled{border-image: url(%1) 0  0 0 %5 repeat  repeat;}")
16       .arg(imgsrc).arg(0).arg(PicWidth*1).arg(PicWidth*2).arg(PicWidth*3));
17 }
18 
19 MainWindow::MainWindow(QWidget *parent)
20     : QMainWindow(parent)
21     , ui(new Ui::MainWindow)
22 {
23     ui->setupUi(this);
24 
25     // 一张图片切图的效果
26     SetButtonStyle(ui->pushButton,":/new/prefix1/image/d.png",4);
27     // 三张独立的图片
28     ui->pushButton_2->setStyleSheet("QPushButton{border-image: url(:/new/prefix1/image/a.png);}"
29                                   "QPushButton:hover{border-image: url(:/new/prefix1/image/b.png);}"
30                                   "QPushButton:pressed{border-image: url(:/new/prefix1/image/c.png);}");
31 }
32 
33 MainWindow::~MainWindow()
34 {
35     delete ui;
36 }
View Code

 

PS:一个扁平按钮QSS样式

 1     ui->pushButton_2->setStyleSheet("QPushButton{"
 2                                     "border: 1px solid #C0C0C0;"
 3                                     "background-color:#C0C0C0;"
 4                                     "border-radius:10px;"
 5                                     "}"
 6                                     "QPushButton:hover{"
 7                                     "border: 1px solid #E3C46F;"
 8                                     "background-color:#FEF4BF;"
 9                                     "border-radius:10px;"
10                                     "}"
11                                     "QPushButton:pressed{"
12                                     "border: 1px solid #AAB4C4;"
13                                     "background-color:#EAF0FF;"
14                                     "border-radius:10px;"
15                                     "}"
16                                     );
View Code

 

 

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用法

posted on 2020-11-20 21:11  疯狂delphi  阅读(743)  评论(0)  编辑  收藏  举报

导航