Qt QSS QPushButton

QSS功能强大,可以自定义各种小部件的外观,其样式表的概念,术语和语法与HTML的CSS样式表类似。

首先创建qss文件,例如:style.qss,把它加到资源文件中, 在代码里加载文件,代码如下

1 QFile file(":/style.qss"); 
2 file.open(QFile::ReadOnly); 
3 QString styleSheet = tr(file.readAll()); 
4 this->setStyleSheet(styleSheet); 
5 file.close();

qss文件内容如下:

 1 QPushButton#myButton:normal/*鼠标正常时的效果*/
 2 {
 3     color:#000000;
 4     background-color:rgb(40, 85, 20); /*改变背景色*/
 5     border-style:inset;/*改变边框风格*/
 6     padding-left:4px;
 7     padding-top:4px;
 8 }
 9  
10 /*鼠标悬浮时的效果*/
11 QPushButton#myButton:hover
12 {
13     color:#0000ff;
14     background-color:rgb(40, 85, 20); /*改变背景色*/
15     border-style:inset;/*改变边框风格*/
16     padding-left:8px;
17     padding-top:8px;
18 }
19 /*如果按下与悬浮想同时产生效果,hover必须写在pressed的后面*/
20 /*鼠标按下时的效果*/
21 QPushButton#myButton:pressed
22 {
23     color:#00ff00;
24     background-color:rgb(40, 85, 20); /*改变背景色*/
25     border-style:inset;/*改变边框风格*/
26     padding-left:6px;
27     padding-top:6px;
28 }
29  
30 /*鼠标不可用时的效果*/
31 QPushButton#myButton:disabled
32 {
33     color:#000000;
34     background-color:rgb(40, 85, 20); /*改变背景色*/
35     border-style:inset;/*改变边框风格*/
36     padding-left:6px;
37     padding-top:6px;
38 }
39  
40 QPushButton
41 {
42     color:red; /*文字颜色*/
43     background-color:rgb(30, 78, 11);/*背景色*/
44     border-style:outset; /*边框风格*/
45     border-width:2px;/*边框宽度*/
46     border-color:rgb(10, 46,112); /*边框颜色*/
47     border-radius:10px; /*边框倒角*/
48     font:bold 14px; /*字体*/
49     font-family: Segoe UI;
50     min-width:100px;/*控件最小宽度*/
51     min-height:20px;/*控件最小高度*/
52     padding:4px;/*内边距*/
53 }
54  
55  
56 /*按钮样式*/
57 QPushButton:flat
58 {
59     border:2px solid red;
60 }
61  
62 /*当按钮打开菜单时:ui->pushButton->setMenu(menu)*/
63 QPushButton:open
64 {
65     background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #abdeac, stop: 1 #fafc12);
66 }
67  
68 /*子选择器:菜单*/
69 QPushButton::menu-indicator
70 {
71     image:url(":/close_normal.png");
72     /*image:none;去掉小三角号*/
73     subcontrol-origin:padding;/*绘制subcontrol的参考矩形的位置*/
74     subcontrol-position:bottom right;/*小三角的位置*/
75 }
76  
77 QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open
78 {
79     position:relative;
80     top:4px;
81     left:4px;
82 }

 

上一篇:关于lambda表达式的一些整理


下一篇:(三)信号与槽