qss 应用代码示例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014678728/article/details/77936396

QSS 应用代码示例

---

使用概述

qt基本控件都是使用盒子模型（Box）, 盒子模型可以看多是四个同心矩形。
从里到外依次是： (内容)content, (填称) padding, （边框） boeder, （边距）margin.
background-image 无法随窗体缩放， border-image 可以随窗体缩放
image绘制在border-image上 ， image-position可以指定图片的对齐方式

常用选择符类型

*                            | 匹配所有部件
QPushButton                  | 匹配所有QPushButton实例和它的所有子类
QPushButton[flat="false]     | 匹配QPushButton的属性为falt为false的实例
.QPushButton                 | 匹配所有QPushButton但不包括它的子类
QPushButton#okButton         | 匹配 所有QPushButton中以okButton为对象名的实例
QDialog QPushButton          | 匹配所有QPushButton， 它们必须是QDialog的子孙
QDialog>QPushButton          | 匹配所有QPushButton， 它们必须是QDialog的直接子部件

前景色和背景色设置

Customizing the Foreground and background colors

Let's start by setting yellow as the background color of all QLineEdits in an application. This could be achieved like this:

qApp->setStyleSheet("QLineEdit { background-color: yellow }");				
If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) 
of a specific dialog, we would rather do this:

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName()		
and use an ID Selector to refer to it:

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
Alternatively, we can set the background-color property directly on the QLineEdit, omitting the selector:

nameEdit->setStyleSheet("background-color: yellow");
To ensure a good contrast, we should also specify a suitable color for the text:

nameEdit->setStyleSheet("color: blue; background-color: yellow");
It might be a good idea to change the colors used for selected text as well:

nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: yellow;"
"selection-background-color: blue;");

背景图图片设置

设置背景图片

  background-image: url(:/icon/image/search.png);
  background-position:right center
  background-repeat: no-repeat;
  background-origin: content;

QPushButton

QPushButton#evilButton 
{
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed
{
background-color: rgb(224, 0, 0);
border-style: inset;
}
QPushButton#evilButton::menu-indicator {
image: url(myindicator.png);
}
QPushButton::menu-indicator {
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}

QScrollBar

QScrollBar:vertical
{
width:8px;
background:rgba(0, 0,0, 0);
margin:0px, 0px, 0px, 0px;
padding-top:9px;
padding-bottom:9px;
}
QScrollBar::handle:vertical
{
width:8px;
background:rgba(0, 0, 0, 55);
border-radius:4px;
min-height:20;
}
QScrollBar::handle:vertical:hover
{
width:8px;
background:rgba(0, 0, 0, 110);
border-radius:4px;
min-height:20;
}
QScrollBar::add-line:vertical
{
height:9px;
width:8px;
border-image: url(:/direction/image/direction/arrow-down2x.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical
{
height:9px;
width:8px;
border-image: url(:/direction/image/direction/arrow-up2x.png);
subcontrol-position:top;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background:rgba(0, 0, 0, 25);
}

QToolBar

"QToolBox::tab { 
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); \
border-radius: 5px;\
color: block; \
text-align:center\
}\
                      \
QToolBox::tab:selected {\
    font: italic;\
    color: block;\
}"\

QLineEdit

QLineEdit[echoMode="2"] {
lineedit-password-character: 42;
}