Qt styleSheet使用总结

2024-03-07 20:31:03

概述

转眼七年过去了，我是一个彻底拥抱过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界面设置
Qt styleSheet使用总结鼠标到按钮上右键，“改变样式表”，在编辑样式表对话框中添加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文件中，这样文件不会直接暴露给用户。
Qt styleSheet使用总结

Selector

一个UI界面有很多控件，使用一个qss文件来指定样式时，可以使用Selector来分别设置控件的样式

1.属性覆盖，一个qss文件里，后面定义的style会覆盖先前的style。

2.同一行中多个类型需要用逗号分隔。

QPushButton, QLineEdit, QCheckBox
{
    background: color: black;
}

3.属性分类

例如：有6个PushButton控件，3个设置为样式一，另外三个设置为样式二

方法一：

设置前3个控件的whatsThis为style1，后三个控件为style2
Qt styleSheet使用总结

修改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使用总结

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.}
上一篇：img标签自适应，各个尺寸图片不变形 object-position/object-fit属性


下一篇：Qt使用QChartView、QFrame、QPushButton画k线