【QT】qss控件样式设置大全

#style.qss文件：

/*变量定义 START========================================================================*/
$normalColor=rgb(255,255,255);
$backgroundColor=rgb(26, 39, 34);
$hoverColor=rgb(34, 78, 61);

/*变量定义 END========================================================================*/

/*全局样式设置 START*/
/*顶级widget样式 START========================================================================*/
QWidget{color: $normalColor;font: 18px "Microsoft YaHei";} /*默认颜色为白色*/

QWidget:disabled{color: rgb(172, 172, 172);}

/*顶级标题title样式 START========================================================================*/
MyTitleLabel{color: #31FF95;}
ClickedWidgetForMeu{color: #31FF95;}


/*顶级QPushButtont样式 START========================================================================*/
QPushButton:checked{background-color: rgb(66, 100, 88,100);}
QPushButton{background:transparent;border:none;color: $normalColor;border-radius:4px;}


/*顶级QTreeWidget样式 START========================================================================*/
QTreeWidget{border:none;}

QTreeWidget::item{color:rgb(255,255,255);padding:4px;height:23px}

QTreeWidget::item:selected,QTreeWidget::item:hover{background-color: $hoverColor;}

QTreeView::branch:has-children:!has-siblings:closed,QTreeView::branch:closed:has-children:has-siblings{border-image: none; image: url(:/image/mainwindow/展开.png);}

QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings{border-image: none; image: url(:/image/mainwindow/收缩.png);}

QTreeWidget::indicator
{
	Width:15px;
	Height:15px;
	border:1px solid rgb(41,112,74);
	border-radius:2px;
}

QTreeWidget::indicator:unchecked
{
	border:1px solid rgb(41,112,74);border-radius:2px
}

QTreeWidget::indicator:checked:hover
{
    border:1px solid rgb(24,144,255);border-radius:2px
}

QTreeWidget::indicator:checked
{
	background-color: rgb(34, 78, 61);
	border:1px solid rgb(34, 78, 61);border-radius:2px;
	border-image: url(:/image/mainwindow/tree/对钩.png);
}

QTreeWidget::indicator:indeterminate:pressed
{
    border-image: url(:/image/mainwindow/tree/正方形.png);
}


/*顶级QTableWidget样式 START========================================================================*/
/*表头样式*/
QTableView::item:selected{background-color:rgba(29,58,46);}

QHeaderView::section           
{               
	color:rgb(255, 255, 255);
	background-color: rgb(33, 80, 58);
	min-height:40px;
	max-height:40px;
	margin-left:0px;
	padding-left:4px;

	border-left:0px solid rgba(0, 110, 89, 200);
	border-right:0px solid rgba(0, 110, 89, 200);
	border-bottom:0px solid rgba(0, 110, 89, 200);
	border-top:0px solid rgba(0, 110, 89, 200);
}

QHeaderView::section:first,QHeaderView::section::middle      
{
	border-left:0px solid rgba(0, 110, 89, 200);
	border-right:1px solid rgba(56, 95, 72, 250);
	border-bottom:1px solid rgba(56, 95, 72, 250);
	border-top:0px solid rgba(0, 110, 89, 200);          
}

QTableWidget                  
{         
	border-left:1px solid rgba(56, 95, 72, 250);
	border-right:1px solid rgba(56, 95, 72, 250);
	border-bottom:1px solid rgba(56, 95, 72, 250);
	border-top:1px solid rgba(56, 95, 72, 250);                             
	color:rgb(255,255,255);
	gridline-color:rgba(56, 95, 72, 250);  
	background-color: rgb(27, 50, 43);
	outline:0px;
}

QTableView
{
	outline:0px;
}

QTreeView
{
	outline:0px;
}

/*上下箭头 START========================================================================*/
QDateTimeEdit::up-button,QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
    subcontrol-position:right top;  
    image: url(:/image/mainwindow/上箭头-box用.png);  
    width: 12px;
    height: 12px;
	margin:4px;
}


QDateTimeEdit::down-button,QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
    subcontrol-position:right bottom;
    image: url(:/image/mainwindow/下箭头-box用.png);  
    width: 12px;
    height: 12px;
	margin:4px;
}

QDateTimeEdit,QTimeEdit,QSpinBox,QDoubleSpinBox{border:1px solid #2b784e;border-radius:4px;color:rgb(255,255,255);background:transparent;padding-left:6px;}

/*QComboBox样式 START========================================================================*/
QComboBox{color: #FFFFFF;background:transparent;padding-left:0px;border:1px solid rgb(41,112,74);border-radius:4px;}
QComboBox::drop-down{border:none} 
QComboBox::down-arrow{margin-right:10px; width:16px;height:16px;border-image: url(:/image/mainwindow/向下箭头.png);}
QComboBox::down-arrow:on{margin-right:10px; width:16px;height:16px; border-image: url(:/image/mainwindow/向上箭头.png);}

/*QComboBox QFrame{background-color:#4be26e;border:none;}*/
QComboBox QAbstractItemView {color:white;background-color:rgb(18, 55, 44);outline:0px;border:none;padding-left:0px;/*边距（还有其他方向边距设置方式）*/} 

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
    height: 40px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
	color: #FFFFFF;
	padding-left:0px;
}
 
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover,QComboBox QAbstractItemView::item:selected {
    height: 40px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
	color: #FFFFFF;
	padding-left:0px;
    background-color: rgb(34,78,61);   /* 整个下拉窗体越过每项的背景色 */
}

QComboBox:hover{border:1px solid rgb(34,160,108);border-radius:4px}

/*滚动条样式 START========================================================================*/
/*纵向滚动条样式*/
QScrollBar:vertical{
	border-style: solid;
	/* 纵轴-总体背景颜色 */
    background:transparent;
	/* 纵轴-总体背景圆角 */
    border-radius: 5px;
	/* 纵轴-总体宽度 */
    min-width: 10px;
    max-width: 10px;
}
QScrollBar::handle:vertical{
	/* 纵轴-凸出部分背景颜色 */
    background: #22A06C;
	/* 纵轴-凸出部分背景圆角 */
    border-radius: 5px;
	/* 纵轴-凸出最新高度 */
    min-height: 30px;
}

QScrollBar::handle:vertical:hover{
	/* 纵轴-凸出部分触发背景颜色 */
    background: rgb(4,250,150);
}

/*横向滚动条样式*/
QScrollBar:horizontal{
	border-style: solid;
	/* 横轴-总体背景颜色 */
    background:transparent;
	/* 横轴-总体背景圆角 */
    border-radius: 5px;
	/* 横轴-总体宽度 */
    min-height: 10px;
    max-height: 10px;
}
QScrollBar::handle:horizontal{
	/* 横轴-凸出部分背景颜色 */
    background: #22A06C;
	/* 横轴-凸出部分背景圆角 */
    border-radius: 5px;
	/* 横轴-凸出最新高度 */
    min-width: 30px;
}

QScrollBar::handle:horizontal:hover{
	/* 横轴-凸出部分触发背景颜色 */
    background: rgb(4,250,150);
}

QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

/*提示框样式*/
QToolTip{border:1px solid #2b784e; background-color: rgb(34,81,59); color:rgb(255,255,255);border-radius:4px;}
		
/*全局样式设置 End*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

在QT的自定义QApplication类中进行引用：

void MyApplication::readStyleSheetFile()
{
    QFile styleFile(":/style/style.qss");
    if(styleFile.open(QIODevice::ReadOnly))
    {
        QString sStyleSheet(styleFile.readAll());
        QMap <QString,QString> colorValue;
        QList <QString> key;
        while (sStyleSheet.indexOf("*/") != -1) {//去掉注释
            int i = sStyleSheet.indexOf("/*");
            int j = sStyleSheet.indexOf("*/");
            sStyleSheet.remove(i,j+2-i);
        }
        while (sStyleSheet.indexOf("$") != -1) {//把变量值记录到容器里
            int i = sStyleSheet.indexOf("$");
            int j = sStyleSheet.indexOf("=");
            int k = sStyleSheet.indexOf(";");
            if(j>k || j==-1){
                break;
            }
            colorValue[sStyleSheet.mid(i,j-i-1)] = sStyleSheet.mid(j+1,k-j-1);
            key<<sStyleSheet.mid(i,j-i-1);
            sStyleSheet.remove(0,k+1);
        }
        for (int i = 0;i<key.length();i++) {//替换原来样式表里的变量为真实值
            while (sStyleSheet.indexOf(key[i]) != -1) {
                sStyleSheet.replace(sStyleSheet.indexOf(key[i]),key[i].length()+1,colorValue[key[i]]);
            }
        }
        this->setStyleSheet(sStyleSheet);
        styleFile.close();
    }
    else
    {
        qDebug("Open failed");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37