Qt控件QSS示例以及介绍
Qt中样式设置大全：
颜色配色大全参考网址：https://www.mdui.org/docs/color
1类选择器
基本语法:
selector{attribute:value};
在上面这条语句中，selector代表选择器，指明了哪个控件将会受到规则影响，{attribute:value;}代表声明语句，其中attribute代表属性，value表示该属性的值。
例如：
QPushButton{color：red；}表示将我们的应用程序中的所有QPushButton对象以及他的子类对象应该使用red作为他们的前景色（字体颜色）；
选择器
通用选择器（又叫通配符选择器）
格式：
==*{属性：值}==他表示程序中所有的widget
注意点:由于通用选择器会匹配程序中所有的widgets，效率低，因此应该尽量少用或者不适用通用选择器。
类选择器
格式：
类名{属性：值；}
类名即Widget类名，由QObject::metaObject::className()获取，类型选择器匹配所有该类及派生类的对象，例如
QPushButton{
color:bule;
}
注意点：
Qt样式表使用widget的QObject::className()来决定何时应用类型选择器。当自定义控件在命名空间之中，QObject::className()会返回(:，这与后面介绍的子控件选择器相冲突，为了解决这个问题，当为命名空间中widget使用类型选择器时，我们必须将::替换为–，例子如下：
namespace ns{
class MyPushButton:public QPushButton{
//..
}
}
qApp->setStyleSheet("ns--MyPushButton{backgroyund:yellow;}");
一般用法
类型选择器会匹配所有该类以及该类的派生类的对象， 所以我们在程序中，有时为了统一一些具有相似性的控件的样式，可以使用类型选择器，如，我们想要QSpinBox，QDoubleSpinBox，QDateTimeEdit等这些编辑框的控件设置一些相同的样式，因为他们都是QAbstractSpinBox类的派生类，因此可以如下写：
QAbstractSpinBox{
min-height:30px;
max-height:30px
}
类选择器
格式：.类名{属性:值;}
这里的类名与类型选择器的类名一样，不同的是，类选择器的类名前面有一个(.)，这种选择器只会匹配该类的所有对象，而不会匹配其派生类的对象。
.QPushButton{
colod:blue;
}
一般用法
类选择器提供了一种匹配所有该类的对象但不会匹配派生类的方法，通常用来特例化拥有派生类的类对象。例如在我的程序中，用QFram来作为容器widget，此时我想对他设置一些样式，但又不影响其他子类对象(QLable,QAbstractScrollArea等等)，那么我可以使用类选择器给所有的QFram设置相同的样式。例如
.Fram{
background-color:red;
padding:15px 25px;
}
ID选择器
格式#id{属性：值;}
这里的id指的是objectName，每个QObject类及其派生类都有的一个属性，“#”+objectName构成了我们的ID选择器，他匹配所有objectName为ID选择器所指定名称的对象。例如：
#QPushButton{
color:red;
}
QT官方给出的ID选择器格式为：类名#id{属性:值;}
但实际上不加类名也是可以的，在正式开发中，还是建议加上类名，这样可以提高阅读性。
后代选择器
格式 选择器1 选择器2{属性:值;}
这个选择器表示：在选择器1匹配的所有对象中，找到选择器2所匹配的后代对象，并给他们设置样式。
注意点：
后代选择器必须用空格隔开每个选择器。
后代选择器可以通过空格一直延续下去 例如：选择器1 选择器2 选择器3 。。 选择器N{属性:值;}
并集选择器
格式 选择器1，选择器2，选择器3{属性：值;}
并集选择器表示，将每个单独选择器匹配到的控件放在同一个结果集中，并给结果集中的每个控件都设置声明语句中的样式。
注意点：
并集选择器必须使用“，”来连接不同的选择器
并集选择器可以使用类选择器，类型选择器，id选择器，属性选择器等。
例如
.QLineEdit,.QComboBox{
border:1px solid gray;
background-color:white;
}
优先级
当一个控件被多个选择器选中并且设置了相同的属性（值不同）时，不能仅仅根据设置样式语句出现的先后顺序进行层叠，那么控件的样式将无法确定，一般通过进行选择器优先级的判定。
第一步 ： 设置方式所产生的优先级问题
在CSS中，有如下层叠优先级规则：
内联样式>内部样式>外部样式>浏览器缺省
而且QSS中，这个规则表现为：
给控件直接设置的样式>给QApplication设置的样式
就是说，调用控件的setStylesheet设置的样式的优先级永远高于给QApplication设置的样式，即使QApplication中的选择器优先级更高。
盒模型
什么是盒模型？
盒模型仅仅是一个形象的比喻，所有的widget都被看做是一个“盒子”，一个盒子包括：外边距，边框，内边距，和实际内容，他们可以看做是有包含关系的矩形，并且这种包含关系是固定不变的。
Margin（外边距） – 与其他盒子之间的距离
Border（边框） – 外边距与内边距之间的区域，边框有自己的颜色不会受到盒子的背景颜色的影响
Padding（内边距） – 内容和边框之间的区域，会受到背景颜色的影响
Content（内容）–盒子的内容，显示文本，图像或其他空间
除了内容外，其他三个部分均不能单独设置颜色，只能设置其宽度，并且是以像素为单位。
QLineEdit中添加图片做登录界面：
QAction *userAction = new QAction(ui->let_User);
userAction->setIcon(QIcon(":/Image/user.png"));
ui->let_User->addAction(userAction,QLineEdit::LeadingPosition);
1.QTableView样式设置
border:边框；
background:背景色；
1.选中设置：
QTableView::item:selected
{
background:rgb(0,0,100);//背景色
color:white;
}
2.表头设置
QHeaderView::section:first
{
border-image: url(:/images/expand/tempUser_headBg2.png);
height: 30px;
font: 11pt "微软雅黑";
}
QHeaderView::section:middle
{
border-image: url(:/images/expand/tempUser_headBg2.png);
height: 30px;
font: 11pt "微软雅黑";
}
QHeaderView::section:last
{
border-image: url(:/images/expand/tempUser_headBg4.png);
height: 30px;
font: 11pt "微软雅黑";
}
3.滚动条设置：
QScrollBar:vertical {
border: 0px;
background:rgba(255,255,255,0);
border-image:url(:/images/scrollbar/vertical_scrollBg.png);
width: 22px;
margin: 22px 0 22px 0;//边距
}
QScrollBar::handle:vertical {
border-image:url(:/images/scrollbar/vertical_slide.png);
width:22px;
min-height:50px;
max-height:200px;
}
QScrollBar::handle:vertical:hover {
border-image: url(:/images/scrollbar/vertical_slide_hover.png);
width:22px;
min-height:50px;
max-height:200px;
}
QScrollBar::handle:horizontal:hover {
border-image: url(:/images/scrollbar/slide.png);
width:22px;
min-height:35px;
}
QScrollBar::handle:vertical:hover {
border-image:url(:/images/scrollbar/vertical_slide_hover.png);
width:22px;
}
QScrollBar::add-line:vertical {
border-image:url(:/images/scrollbar/vertical_down.png);
height: 22px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:pressed{
border-image:url(:/images/scrollbar/vertical_down_down.png);
height: 22px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border-image:url(:/images/scrollbar/vertical_up.png);
height:22px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:pressed {
border-image:url(:/images/scrollbar/vertical_up_down.png);
height: 22px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar:horizontal {
border: 0px;
background:rgba(255,255,255,0);
border-image:url(:/images/scrollbar/scrollBg.png);
height: 22px;
margin: 0 22px 0 22px;
}
QScrollBar::handle:horizontal {
border-image:url(:/images/scrollbar/slide.png);
height:22px;
}
QScrollBar::handle:vertical:hover {
border-image:url(:/images/scrollbar/vertical_slide_hover.png);
width:22px;
}
QScrollBar::add-line:horizontal {
border-image:url(:/images/scrollbar/down.png);
width: 22px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal:pressed{
border-image:url(:/images/scrollbar/down_down.png);
width: 22px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border-image:url(:/images/scrollbar/up.png);
width:22px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal:pressed {
border-image:url(:/images/scrollbar/up_down.png);
width: 22px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}
2.QComboBox样式设置
1.未下拉时，QComboBox的样式：
QComboBox {
border: 1px solid gray; /* 边框 */
border-radius: 3px; /* 圆角 */
padding: 1px 18px 1px 3px; /* 字体填衬 */
color: #000;
font: normal normal 15px "Microsoft YaHei";
background: transparent;
}
2.下拉后，整个下拉窗体样式
QComboBox QAbstractItemView {
outline: 0px solid gray; /* 选定项的虚框 */
border: 1px solid yellow; /* 整个下拉窗体的边框 */
color: green;
background-color: red; /* 整个下拉窗体的背景色 */
selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */
}
3.下拉后，整个下拉窗体每项的样式
QComboBox QAbstractItemView::item {
height: 50px; /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
}
4.下拉后，整个下拉窗体越过每项的样式
QComboBox QAbstractItemView::item:hover {
color: #FFFFFF;
background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */
}
5.下拉后，整个下拉窗体被选择的每项的样式
QComboBox QAbstractItemView::item:selected {
color: #FFFFFF;
background-color: lightgreen;
}
6.QComboBox中的垂直滚动条
QComboBox QAbstractScrollArea QScrollBar:vertical {
width: 10px;
background-color: #d0d2d4; /* 空白区域的背景色 灰色green */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
border-radius: 5px; /* 圆角 */
background: rgb(160,160,160); /* 小方块的背景色深灰lightblue */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */
}
7.点击QComboBox
QComboBox:on {
}
8.下拉框样式
QComboBox::drop-down {
subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
subcontrol-position: top right; /* 下拉框的位置（右上） */
width: 15px; /* 下拉框的宽度 */
border-left-width: 1px; /* 下拉框的左边界线宽度 */
border-left-color: darkgray; /* 下拉框的左边界线颜色 */
border-left-style: solid; /* 下拉框的左边界线为实线 */
border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
border-bottom-right-radius: 3px; /* 同上 */
}
9.越过下拉框样式
QComboBox::drop-down:hover {
background: yellow;
}
10.下拉箭头样式
QComboBox::down-arrow
{
width: 15px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */ background: transparent; /* 下拉箭头的的背景色 */ padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */
image: url(:/images/combobox_arrow_down.png); } /* 点击下拉箭头 */
QComboBox::down-arrow:on
{ image: url(:/images/combobox_arrow_up.png); /* 显示下拉箭头 */
}
3.QTabWidge样式表设置
QTableWidget
{
}
QTabBar::tab//表头
{
height:px;
font_size:px;
border-image:url();
}
QTabBar::tab:selected、、选择表头时的状态
{
border-image:url();
border-bottom:4px solid red;//下划线
}
4.QToolButton样式设置
---QtoolButton原始样式
QToolButton
{
padding-left:0px;
}
---悬浮样式
QToolButton:hover
{
border-image:url( )
}
---按下样式
QToolButton:pressed
{
}
--无效样式
QToolButton:disabled
{
}
--菜单栏按钮（包括下拉按钮）
QToolButton:menu-button
{
--设置下拉箭头宽度
width:15px;
border-top-right-radius:0px;--圆角半径
}
--下拉框图标
QToolButton::menu-arrow
{
image:url( );
}
5.QSpinBox,QDoubleSpinBox,QDateTimeEdit样式设置
--开始
QSpinBox,QDoubleSpinBox,QDateTimeEdit
{
font-size:12px;
}
--无效样式
QSpinBox:disabled
{
}
--焦点
QSpinBox::focus
{
}
--上按钮
QSpinBox::up-button:hover
{
}
--下按钮
QSpinBox::down-button
{
}
6.QCheckBox样式设置
--未勾选状态
QCheckBox::indicator:unchecked
{
image:url( )
}
--勾选状态
QCheckBox::indicator:checked
{
image:url( )
}
--未勾选hover状态，图片设置
QCheckBox::indicator:unchecked:hover
{
image:url( )
}
--勾选hover状态，图片设置
QCheckBox::indicator:checked:hover
{
image:url( )
}
--部分选中
QCheckBox::indicator:indeterminate
{
image:url( )
}
QCheckBox::indicator:indeterminate:hover
{
image:url( )
}
QCheckBox::indicator:indeterminate:disabled
{
image:url( )
}
--正常样式
QCheckBox
{
}
--悬浮样式
QCheckBox:hover
{
}
--未使能样式
QCheckBox:disabled
{
}
7.样式实例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9okIs7Dh-1633950461751)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20200820153106207.png)]
QWidget
{
color:#64FFDA;
}
QLineEdit
{
border:1px solid #01AFEB;
border-radius:1px;
padding:0px 0px 0px 10px;
min-width:5em;
font: 14px "Microsoft YaHei";
color:#64FFDA;
background-color:rgba(0,23,57,127);
}
QTextEdit
{
border:1px solid #01AFEB;
border-radius:1px;
padding:0px 0px 0px 10px;
min-width:5em;
font: 14px "Microsoft YaHei";
color:#64FFDA;
background-color:rgba(0,23,57,127);
}
QComboBox
{
border:1px solid #01AFEB;
border-radius:1px;
padding:0px 0px 0px 10px;
min-width:5em;
font:14px "Microsoft YaHei";
color:#64FFDA;
background-color:rgba(0,23,57,127);
}
QComboBox::drop-down
{
subcontrol-origin:padding;
subcontrol-position:top right;
width:30px;
border-left-width:0px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
image:url(://image);
}
QComboBox::drop-arrow{image:url(://image);}
QComboBox::drop-arrow:hover {image:url(://image);}
QComboBox QAbstractItemView
{
border: 1px solid #01AFEB;
selection-color:white;
selection-background-color:#03A9F4;
outline:0px solid gray;
background-color:#0f1a33;
outline:0px;
}
QComboBox QAbstractItemView::item
{
height:30px;
min-height:30px;
font:25 11pt "Microsoft YaHei";
border-color:transparent;
}
QPushButton
{
color:white;
border:none;
height:28px;
width:93px;
background-image:url(://);
}
QPushButton:hover
{
color:orange
background-image:url(://);
}
QTabWidget
{
border-top:2px;
background-image:url(://);
}
QTabBar::tab
{
width:150px;
height:30px;
font-size:16px;
border-image:url(://);
}
QTabBar::tab:selected
{
height:30px;
font-size:16px;
border-image:url(://);
}
QTableView
{
color:#64FFDA;
background-image:url();
Border:1px solid #80DEEA;
gridline-color:lightgray;
}
QTableView::item:selected
{
background-color:#A1887F;
}
QPushButton
QPushButton {
/* 水平居左、垂直居中 */
text-align: left center;
padding-left: 3px;
}
QPushButton::menu-indicator {
subcontrol-position: right center;
subcontrol-origin: padding;
padding-right: 3px;
/* image: none; */
}
QRadioButton
QRadioButton{
spacing: 2px;
color: white;
}
QRadioButton::indicator {
width: 45px;
height: 30px;
}
QRadioButton::indicator:unchecked {
image: url(:/Images/switchOff);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/Images/switchOffHover);
}
QRadioButton::indicator:unchecked:pressed {
image: url(:/Images/switchOffPressed);
}
QRadioButton::indicator:checked {
image: url(:/Images/switchOn);
}
QRadioButton::indicator:checked:hover {
image: url(:/Images/switchOnHover);
}
QRadioButton::indicator:checked:pressed {
image: url(:/Images/switchOnPressed);
}
QSlider
QSlider::groove:horizontal {
height: 6px;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
width: 1px;
background: rgb(0, 160, 230);
margin: -6px 0px -6px 0px;
border-radius: 9px;
}
| QSlider::NoTicks | 0 | 不绘制任何刻度线 |
|---|---|---|
| QSlider::TicksBothSides | 3 | 在滑块的两侧绘制刻度线 |
| QSlider::TicksAbove | 1 | 在（水平）滑块上方绘制刻度线 |
| QSlider::TicksBelow | 2 | 在（水平）滑块下方绘制刻度线 |
| QSlider::TicksLeft | TicksAbove | 在（垂直）滑块左侧绘制刻度线 |
| QSlider::TicksRight | TicksBelow | 在（垂直）滑块右侧绘制刻度线 |
pSlider->setTickPosition(QSlider::TicksAbove); *//刻度在上方=
https://blog.csdn.net/liang19890820/article/details/50277095