Qt styleSheet使用总结
作者：互联网
概述
转眼七年过去了，我是一个彻底拥抱过MFC的人，记得老大的一个需求要把按钮做成圆角，并添加背景颜色，做前端html的可能认为很简单，然而放到MFC上那可真的是很…很麻烦的，自定义类继承Button ，新手估计还搞不定，怎么也有上百行代码，实在不友好，Qt诞生大大简化了这些工作，只需要使用QSS（Qt Style Sheet）就可以轻松做到，最近详细了解了QSS，做了个百度网盘的登录界面，整理好我会把源码放出来，供大家参考。
QSS语法
background-color:rgb(6, 168, 255); 背景色
color:red; 字体颜色
border-radius:5px; 边框圆角半径
border:2px solid green; 边框2像素，实现，绿色
font:10pt; 字体大小10
设置QSS方法
方法一：UI界面设置
鼠标到按钮上右键，“改变样式表”，在编辑样式表对话框中添加QSS样式。
方法二：程序添加
每一个控件都有setStyleSheet(const QString &styleSheet)方法，样式字符串直接传参即可，例：
ui.pushButton1->setStyleSheet("QPushButton{background-color: white; color: rgb(100, 100, 100) ;}");
方法三：通过QSS文件添加
新建文件StyleSheet.qss文件，添加内容如下：
复制代码
/**按钮静止无操作样式**/
QPushButton
{
background-color:rgb(255,255,255);
color:rgb(6,168,255);
border:2px solid rgb(6,168,255);
font-size:14px;
border-radius:10px;
}
/**鼠标悬停在按钮**/
QPushButton:hover
{
background-color: rgb(212,243,255);
color:rgb(6,168,255);
border:2px solid rgb(6,168,255);
border-radius:14px;
}
/**鼠标按下按钮**/
QPushButton:pressed
{
background-color: rgb(175,232,255);
color:white;
border:2px solid rgb(6,168,255);
border-radius:14px;
}
读取配置文件设置指定按钮样式：
StyleDialog::StyleDialog(QWidget *parent)
: QDialog(parent)
{
ui.setupUi(this);
QString strStyle = ReadQssFile("StyleSheet.qss");
ui.pushButton2->setStyleSheet(strStyle);
}
StyleDialog::~StyleDialog()
{
}
QString StyleDialog::ReadQssFile(const QString& filePath)
{
QString strStyleSheet = "";
QFile file(filePath);
file.open(QFile::ReadOnly);
if (file.isOpen())
{
strStyleSheet = QLatin1String(file.readAll());
}
return strStyleSheet;
}
实际项目中一般qss文件直接添加到资源里面，一起打包到EXE文件中，这样文件不会直接暴露给用户。
Selector
一个UI界面有很多控件，使用一个qss文件来指定样式时，可以使用Selector来分别设置控件的样式
1.属性覆盖，一个qss文件里，后面定义的style会覆盖先前的style。
2.同一行中多个类型需要用逗号分隔。
QPushButton, QLineEdit, QCheckBox
{
background: color: black;
}
3.属性分类
例如：有6个PushButton控件，3个设置为样式一，另外三个设置为样式二
方法一：
设置前3个控件的whatsThis为style1，后三个控件为style2
修改StyleSheet.qss文件内容
QPushButton[whatsThis="style1"]
{
background-color: rgb(63,141,215);
color:green;
}
QPushButton[whatsThis="style2"]
{
background-color: rgb(63,141,215);
color:red;
}
方法二：
直接在qss文件里指定object name，不推荐这种方式，6个控件需要些六遍，分别指定object name。
QPushButton#pushButton1
{
background-color: rgb(63,141,215);
color:red;
}
最后在程序的入口函数设置如下代码：
QApplication a(argc, argv);
StyleDialog styleDialog;
a.setStyleSheet(styleDialog.ReadQssFile(":/qtlearn/Resources/StyleSheet.qss"));
最后附上一张使用QSS技术仿的百度网盘界面：
Qt 之 stylesheet 用法, QSS实例
规则见帮助文档
背景图片九宫格
border-width: 5px;
border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch;
border-width必须要加上，用border-image来自动根据大小扩展，而不用background-image
字体颜色
color: white;
按钮3种状态：正常，鼠标置上，按下
QPushButton
QPushButton:hover
QPushButton:checked
对于checked，要把QPushButton设置为可checkable。(setCheckable(true))
实例：http://blog.csdn.net/xuhongtao123459/archive/2010/09/10/5875614.aspx
01.*{
02. font-size:13px;
03. color:white;
04. font-family:"宋体";
05.}
06.CallWidget QLineEdit#telEdt
07.{
08. font-size:24px;
09.}
10.QMainWindow,QDialog{
11. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
12. stop: 0 #1B2534, stop: 0.4 #010101,
13. stop: 0.5 #000101, stop: 1.0 #1F2B3C);
14.}
15.QWidget{
16. background:#121922;
17.}
18.QLabel{
19. background:transparent;
20.}
21.DailForm QLineEdit#phoneLineEdt{
22. font-size:36px;
23. font-weight: bold;
24.}
25.QPushButton,QToolButton{
26. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
27. stop: 0 #5B5F5F, stop: 0.5 #0C2436,
28. stop: 1.0 #27405A);
29. border-style: outset;
30. border-width: 1px;
31. border-radius: 5px;
32. border-color: #11223F;
33. padding: 1px;
34.}
35.QPushButton::hover,QToolButton::hover{
36. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
37. stop: 0 #758385, stop: 0.5 #122C39,
38. stop: 1.0 #0E7788);
39. border-color: #11505C;
40.}
41.QPushButton::pressed,QToolButton::pressed{
42. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
43. stop: 0 #969B9C, stop: 0.5 #16354B,
44. stop: 1.0 #244F76);
45. border-color: #11505C;
46.}
47.QPushButton::disabled,QToolButton::disabled{
48. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
49. stop: 0 #282B2C, stop: 0.5 #09121A,
50. stop: 1.0 #111D29);
51. border-color: #0A1320;
52. color:#6A6864;
53.}
54.QDialog QPushButton,QDialog QToolButton{
55. min-width:30px;
56. min-height:23px;
57.}
58.QToolButton[objectName="minimizeToolBtn"] {
59. background: transparent;
60. border:none;
61. image:url(qss/minimize.png)
62.}
63.QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {
64. image:url(qss/minimize_hover.png)
65.}
66.QToolButton[objectName="maximizeToolBtn"] {
67. background: transparent;
68. border:none;
69. image:url(qss/maximize.png)
70.}
71.QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed {
72. image:url(qss/maximize_hover.png)
73.}
74.QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] {
75. background: transparent;
76. border:none;
77. image:url(qss/close.png)
78.}
79.QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed{
80. image:url(qss/close_hover.png)
81.}
82.QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed{
83. image:url(qss/close_hover.png)
84.}
85.QToolButton[objectName="titleSetUpToolBtn"]{
86. background: transparent;
87. border:none;
88. image:url(qss/setup.png)
89.}
90.DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,
91. QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,
92. QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,
93. QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {
94. font-size:36px;
95. border-radius: 10px;
96.}
97.DailForm QToolButton#delToolBtn{
98. border-radius: 10px;
99.}
100.QFrame{
101. border-color:#32435E;
102. border-width:1px;
103. border-radius: 3px;
104.}
105.QLineEdit,QTextEdit {
106. border: 1px solid #32435E;
107. border-radius: 3px;
108. /* padding: 0 8px; */
109. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
110. stop: 0 #080B10,
111. stop: 1.0 #212C3F);
112. selection-background-color: #0A246A;
113.}
114.QLineEdit::hover{
115. border-color:#5D8B9E;
116.}
117.QLineEdit[echoMode="3"] {
118. lineedit-password-character: 9679;
119.}
120.#QLineEdit:read-only {
121. background: #543F7C;
122.}
123.QTabWidget::pane { /* The tab widget frame */
124. border: 0px solid #32435E;
125. position: absolute;
126. left: -0.1em;
127.}
128.QTabWidget#MainTabWidget::tab-bar {
129. left: -3px; /* move to the right by 5px */
130.}
131.QTabWidget#MainTabWidget QTabBar::tab {
132. height: 14ex;
133. width: 14ex;
134.}
135.QTabBar::tab {
136. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
137. stop: 0 #292F31, stop: 1 #0C131E);
138.}
139.QTabBar::tab:selected{
140. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
141. stop: 0 #113845, stop: 1.0 #15A8FF);
142.}
143.QTabBar::tab:hover {
144. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
145. stop: 0 #113845, stop: 1.0 #0E6F80);
146.}
147.#QTabBar::tab:selected {
148. border-color: #32435E;
149. border-right-color: #32435E; /* same as pane color */
150.}
151.#QTabBar::tab:!selected {
152. margin-left: 2px; /* make non-selected tabs look smaller */
153.}
154.#QTabBar:tab:first:selected {
155. margin-top: 0;
156.}
157.QTabBar:tab:last:selected {
158. margin-right: 0;
159.}
160.QTabBar:tab:only-one {
161. margin: 0;
162.}
163.QListWidget{
164. border: 1px solid #32435E;
165. background:#050609;
166.}
167.QListWidget::item:selected {
168. /*border: 0px solid #33CCFF;*/
169. border:none;
170. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
171. stop: 0 #6A848C, stop: 1.0 #0F9EAF);
172. padding:0px;
173. margin:0px;
174.}
175.#QListWidget::item:selected:!active {
176. border-width: 0px ;
177.}
178.#QListWidget::item:selected:active {
179. border-width: 1px;
180.}
181.
182.QComboBox {
183. border: 1px solid #32435E;
184. border-radius: 3px;
185. padding: 1px 18px 1px 3px;
186. min-width: 6em;
187.}
188.QComboBox::hover{
189. border-color:#5D8B9E;
190.}
191.QComboBox:editable {
192. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
193. stop: 0 #080B10,
194. stop: 1.0 #212C3F);
195.}
196.QComboBox:!editable, QComboBox::drop-down:editable {
197. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
198. stop: 0 #080B10,
199. stop: 1.0 #212C3F);
200.}
201./* QComboBox gets the "on" state when the popup is open */
202.QComboBox:!editable:on, QComboBox::drop-down:editable:on {
203. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
204. stop: 0 #080B10,
205. stop: 1.0 #212C3F);;
206.}
207.QComboBox:on { /* shift the text when the popup opens */
208. padding-top: 3px;
209. padding-left: 4px;
210.}
211.QComboBox::drop-down {
212. subcontrol-origin: padding;
213. subcontrol-position: top right;
214. width: 15px;
215. border-left-width: 1px;
216. border-left-color: 32435E;
217. border-left-style: solid; /* just a single line */
218. border-top-right-radius: 3px; /* same radius as the QComboBox */
219. border-bottom-right-radius: 3px;
220.}
221.QComboBox::down-arrow {
222. image: url(qss/downarrow.png);
223.}
224.QComboBox::down-arrow:on { /* shift the arrow when popup is open */
225. top: 1px;
226. left: 1px;
227.}
228.QComboBox QAbstractItemView {
229. border: 2px solid #32435E;
230. selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
231. stop: 0 #506B79,
232. stop: 1.0 #0D95A6);
233. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
234. stop: 0 #1B2534, stop: 0.4 #010101,
235. stop: 0.5 #000101, stop: 1.0 #1F2B3C);
236.}
标签：总结,Qt,color,stop,QPushButton,QToolButton,styleSheet,background,border 来源： https://blog.csdn.net/u013873761/article/details/111592891