版权声明:本文为博主原创文章,未经博主允许不得转载。 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;
}