前言
在我们的开发过程中，使用控件通常通过样式来实现的，下面的几个控件就是使用样式来实现的。
QComboBox
/* 未下拉时，QComboBox的样式 */
QComboBox
{
border: 1px solid gray; /* 边框 */
border-radius: 5px; /* 圆角 */
padding: 1px 18px 1px 3px; /* 字体填衬 */
color: white;
font: normal normal 24px "Microsoft YaHei";
background:rgb(54,54,54);
}
/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView
{
outline: 0px solid gray; /* 选定项的虚框 */
border: 1px solid yellow; /* 整个下拉窗体的边框 */
color: rgb(250,251,252);
background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */
selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */
}
/* 下拉后，整个下拉窗体每项的样式 */
/* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */
QComboBox QAbstractItemView::item
{
height: 50px;
}
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover
{
color: rgb(90,100,105);
background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */
}
/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected
{
color: rgb(12, 23, 34);
background-color: lightgreen;
}
/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical
{
width: 13px;
background-color: #d0d2d4; /* 空白区域的背景色*/
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical
{
border-radius: 5px; /* 圆角 */
background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover
{
background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */
}
/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable
{
background: green;
}
/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on
{
background: rgb(54,54,54);
image: url(:/resources/up.png); /* 显示上拉箭头 */
}
/* 下拉框样式 */
QComboBox::drop-down
{
subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
subcontrol-position: top right; /* 下拉框的位置（右上） */
width: 32px; /* 下拉框的宽度 */
border-left-width: 1px; /* 下拉框的左边界线宽度 */
border-left-color: darkgray; /* 下拉框的左边界线颜色 */
border-left-style: solid; /* 下拉框的左边界线为实线 */
border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
border-bottom-right-radius: 3px; /* 同上 */
image: url(:/resources/down.png);
}
/* 越过下拉框样式 */
QComboBox::drop-down:hover
{
background: rgb(80, 75, 90);
}
/* 下拉箭头样式 */
QComboBox::down-arrow
{
width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */
background: rgb(54,54,54); /* 下拉箭头的的背景色 */
padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */
image: url(:/resources/down.png);
}
/* 点击下拉箭头 */
QComboBox::down-arrow:on
{
image: url(:/resources/up.png); /* 显示上拉箭头 */
}效果如下图：
代码初始化
void Widget::initCombox()
{
QStringList strList;
strList << "item1" << "item2" << "item3" << "item4"
<< "item1" << "item2" << "item3" << "item4"
<< "item1" << "item2" << "item3" << "item4"
<< "item1" << "item2" << "item3" << "item4";
ui->comboBox->addItems(strList);
ui->comboBox->setView(new QListView(this));
//ui->comboBox->setEditable(true);
//ui->comboBox->insertSeparator(10);
//ui->comboBox->insertSeparator(12);
}QprogressBar
QProgressBar:vertical
{
border-radius:5px;
background-color:darkgray;
text-align:center;
padding-left: 5px; padding-right: 4px; padding-bottom: 20px;
}
QProgressBar::chunk:vertical
{
background-color:#06B025;
margin:10px;
}样式表的加载
void Widget::initSkin()
{
QFile file(":/resources/skin.qss");
QString lineStr;
if(file.open(QIODevice::ReadOnly | QIODevice::Text))
{
QTextStream txtInput(&file);
while(!txtInput.atEnd())
{
lineStr += txtInput.readLine(); //逐行读取qss代码
}
}
file.close();
this->setStyleSheet(lineStr);
}skin.qss
QWidget
{
background-color: rgb(54,54,54);
border-top:2px;
border-bottom:2px;
border-left:2px;
border-right:2px;
}
QLineEdit
{
background-color: rgb(249,249,249);
border: 1px solid black;
border-radius:5;
font:14px;
}
QLabel
{
background-color: rgb(54,54,54);
font:12px;
color:white;
}
QPushButton
{
color:rgb(251,251,251);
font:12px, "微软雅黑";
background-color:rgb(105,105,105);
border-radius:4px;
padding:2px;
}
QPushButton:hover
{
color:#0000ff;
background-color:rgb(210, 205, 205); /*改变背景色*/
border-style:inset;/*改变边框风格*/
padding-left:2px;
padding-top:2px;
}
QPushButton:flat
{
border:2px solid red;
}
QPushButton:pressed
{
color:green;
}
QPlainTextEdit
{
background-color: rgb(169,169,169);
font:14px;
color:white;
}qss简介大全
# 一、什么是qss?
Qt style sheet, 简写就是qss, Qt样式表，不需要用C++代码控件进行重载，就可以修改控件外观，美化界面，类似于前端的css, 但是没有css功能强大.
例如下面QLabel的样式设置
```css
QLabel
{
background-color: rgb(54,54,54); /*背景色*/
color: rgb(230,230,230); /*字体颜色，前景色*/
font-family: "Microsoft YaHei"; /*字体类型*/
font-size: 14px; /*字体大小*/
}注释形式：
/*我是qss注释*/除了以上样式外，还有很多，qss千变万化，可以写出各种花里胡哨的样式。
二、常用样式
字体样式
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #123456;解释如下：
- font-family ：为设置字体类型，标准形式需要加双引号，不加也可能会生效，具体看系统是否支持，中英文都支持，但要保证字体编码支持，一般程序编码为"utf-8"时没问题。
- font-size ：为设置字体大小，单位一般使用 px 像素
- font-style ：为设置字体斜体样式，italic 为斜体， normal 为不斜体
- font-weight ： 为设置字体加粗样式，bold 为加粗， normal 为不加粗
- color ：为设置字体颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent；注意：字体颜色用的是 color 属性，没有 font-color 这个属性
字体也可以一起设置：
font: bold italic 18px "Microsoft YaHei";同时设置字体 style weight size family 的样式时，style(是否斜体) 和 weight (是否加粗)必须出现在开头，size 和 family 在后面，而且 size 必须在 family 之前，否则样式将不生效，
边框样式
QLabel
{
border-style: solid;
/*单独设置某一边 border-right-style:dotted;*/
border-width: 2px;
border-color: red;
}也可以一起设置
border: 2px solid red;solid 为实线， dashed 为虚线， dotted 为点线， none 为不显示（如果不设置 border-style 的话，默认带边框）
单独的属性设置
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;边框半径(圆角)
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
border-radius: 20px; /*统一的半径*/文字位置
在 qss 中，没有对齐方式，只能通过设置 padding 来实现文字的显示位置；一般 padding-left 相当于 x 坐标，padding-top 相当于 y 坐标，设置这两个就可以在任意位置显示了（默认情况下文字是上下左右都居中显示的）
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;背景样式
其它的控件也适用
background-color: rgb(54,54,54);
background-image: url(:/imgs/picture/0.png); /*显示背景图片, 也可以不用引号*/
background-repeat: no-repeat; /*不重复显示*/
background-position: left center;解释如下：
- background-color 为设置背景颜色，可以使用十六进制数表示颜色，也可以使用某些特殊的字体颜色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 来设置，其中 r、g、b、a 值为0~255，如果想不显示颜色可以设置值为透明 transparent
- background-image 为设置背景图片，图片路径为 url(image-path)
- background-repeat 为设置背景图是否重复填充背景，如果背景图片尺寸小于背景实际大小的话，默认会自动重复填充图片，可以设置为 no-repeat 不重复，repeat-x 在x轴重复，repeat-y 在y轴重复
- background-position 为设置背景图片显示位置，只支持 left right top bottom center；值 left right center 为设置水平位置，值 top bottom center 为设置垂直位置
统一设置
background: url(":/imgs/picture/0.png") no-repeat left center #363636;background 为设置背景的所有属性，color image repeat position 这些属性值出现的顺序可以任意
动态悬浮样式
QLabel:hover
{
color: red;
border-color: green;
background-color: #363636;
}禁止使用的样式
QLabel:disabled
{
color: blue;
border-color: brown;
background-color: #363636;
}三、控件应用
QLabel
效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELm0RcdG-1680185686349)(D:\TyporaImageSave\image-20220620000419677.png)]
qss代码
QLabel {
font-family: "Microsoft YaHei";
font-size: 18px;
color: #BDC8E2;
font-style: normal;
font-weight: normal;
border-style: solid;
border-width: 2px;
border-color: aqua;
border-radius: 20px;
padding-left: 20px;
padding-top: 3px;
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
}除此之外，我们还可以设置动态样式，鼠标悬浮时的样式
QLabel:hover
{
color: red;
border-color: green;
background-color: aqua;
}QLineEdit
常用属性设置
setReadOnly(false); // 只读
setFocusPolicy(Qt::NoFocus); // 无法获得焦点
setMaxLength(10); // 最多输入10个字符文本对齐方式
lineedit->setAlignment(Qt::AlignLeft) //左对齐
lineedit->setAlignment(Qt::AlignRight) //右对齐
lineedit->setAlignment(Qt::AlignCenter) //居中对齐正则控制
第一个数是1-9的，第二个数和之后的是0-9的
QRegExp regx("[1-9][0-9]+$");
QValidator *validator = new QRegExpValidator(regx, ui->lineEdit);
lineEdit->setValidator(validator);样式设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0WdlJ9w-1680185686355)(D:\TyporaImageSave\image-20220620001144196.png)]
qss代码
QLineEdit{
border: 1px solid #ABCDA0; /* 边框宽度为1px，颜色为#A0A0A0 */
border-radius: 3px; /* 边框圆角 */
padding-left: 5px; /* 文本距离左边界有5px */
background-color: #F2F2F2; /* 背景颜色 */
color: #A0A0A0; /* 文本颜色 */
selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */
selection-color: #F2F2F2; /* 选中文本的颜色 */
font-family: "Microsoft YaHei"; /* 文本字体族 */
font-size: 10pt; /* 文本字体大小 */
}
QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */
border: 1px solid #298DFF;
border-radius: 3px;
background-color: #F2F2F2;
color: #298DFF;
selection-background-color: #298DFF;
selection-color: #F2F2F2;
}
QLineEdit[echoMode="2"] { /* QLineEdit有输入掩码时的状态 */
lineedit-password-character: 9679;
lineedit-password-mask-delay: 2000;
}
QLineEdit:disabled { /* QLineEdit在禁用时的状态 */
border: 1px solid #CDCDCD;
background-color: #CDCDCD;
color: #B4B4B4;
}
QLineEdit:read-only { /* QLineEdit在只读时的状态 */
background-color: #CDCDCD;
color: #F2F2F2;
}QPushButton 按钮样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvBY6O0H-1680185686356)(D:\TyporaImageSave\image-20220620001543055.png)]
基本样式
QPushButton
{
/* 前景色, 文字的颜色 */
color:green;
/* 背景色 */
background-color:rgb(223,223,223);
/* 边框风格 */
border-style:outset;
/* 边框宽度 */
border-width:0.5px;
/* 边框颜色 */
border-color:rgb(10,45,110);
/* 边框倒角 */
border-radius:10px;
/* 字体 */
font:bold 22px;
/* 控件最小宽度 */
min-width:100px;
/* 控件最小高度 */
min-height:20px;
/* 内边距 */
padding:4px;
}
/* 鼠标按下时的效果 */
QPushButton#pushButton:pressed
{
/* 改变背景色 */
background-color:rgb(40,85,20);
/* 改变边框风格 */
border-style:inset;
/* 使文字有一点移动 */
padding-left:6px;
padding-top:6px;
}
/* 按钮样式 */
QPushButton:flat
{
border:2px solid red;
}
/*鼠标悬浮时的效果*/
QPushButton:hover
{
color:#0000ff;
background-color:rgb(210, 205, 205); /*改变背景色*/
border-style:inset;/*改变边框风格*/
padding-left:8px;
padding-top:8px;
}还可以单独指定按钮，用#标明例如：
/*鼠标悬浮时的效果*/
QPushButton#btn2:hover
{
color:#0000ff;
background-color:rgb(100, 100, 20); /*改变背景色*/
border-style:inset;/*改变边框风格*/
padding-left:8px;
padding-top:8px;
}相关状态
:checked button部件被选中
:unchecked button部件未被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:pressed 部件被鼠标按下
:indeterminate checkbox或radiobutton被部分选中
:off 部件可以切换，且处于off状态
:on 部件可以切换，且处于on状态禁止使用的样式
当按钮被禁用后 ui->pushButton->setEnabled(false);
QPushButton:disabled
{
color: blue;
border-color: brown;
background-color: #363636;
}背景图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zc2qkbED-1680185686357)(D:\TyporaImageSave\image-20220620001830796.png)]
qss代码
QPushButton
{
background-image:url(":/resources/user.png");
background-position:center;
background-repeat: no-repeat;
border:none
}
QPushButton:hover
{
background-color:rgb(10,210,210);
background-image:url(":/resources/user_hover.png")
}
QPushButton:pressed
{
background-color:rgb(10,210,210);
background-image:url(":/resources/user.png");
padding-left:8px;
padding-top:8px;
}QSlider
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvq8g7BI-1680185686358)(D:\TyporaImageSave\image-20220620004412799.png)]
水平的QSlider
QSlider
{
background-color: #363636;
border-style: outset;
border-radius: 10px;
}
QSlider::groove:horizontal
{
height: 12px;
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0
}
QSlider::handle:horizontal
{
background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);
width: 16px;
height: 16px;
margin: -5px 6px -5px 6px;
border-radius:11px;
border: 3px solid #ffffff;
}竖直的
QSlider
{
background-color: rgba(22, 22, 22, 0.7);
padding-top: 15px; /*上面端点离顶部的距离*/
padding-bottom: 15px;
border-radius: 5px; /*外边框矩形倒角*/
}
QSlider::add-page:vertical
{
background-color: #FF7826;
width:5px;
border-radius: 2px;
}
QSlider::sub-page:vertical
{
background-color: #7A7B79;
width:5px;
border-radius: 2px;
}
QSlider::groove:vertical
{
background:transparent;
width:6px;
}
QSlider::handle:vertical
{
height: 14px;
width: 14px;
margin: 0px -4px 0px -4px;
border-radius: 7px;
background: white;
}QComboBox
样式1：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FubTiDd-1680185686358)(D:\TyporaImageSave\image-20220621013451271.png)]
qss代码
/* 未下拉时，QComboBox的样式 */
QComboBox
{
background:rgb(54,54,54);
border: 1px solid gray; /* 边框 */
border-radius: 5px; /* 圆角 */
padding: 1px 18px 1px 3px; /* 字体填衬 */
color: white;
font: normal normal 24px "Microsoft YaHei";
}样式2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zHn5FCLX-1680185686359)(D:\TyporaImageSave\image-20220621015716948.png)]
qss代码
/* 未下拉时，QComboBox的样式 */
QComboBox
{
border: 1px solid gray; /* 边框 */
border-radius: 5px; /* 圆角 */
padding: 1px 18px 1px 3px; /* 字体填衬 */
color: white;
font: normal normal 24px "Microsoft YaHei";
background:rgb(54,54,54);
}
/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView
{
outline: 0px solid gray; /* 选定项的虚框 */
border: 1px solid yellow; /* 整个下拉窗体的边框 */
color: rgb(250,251,252);
background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */
selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */
}
/* 下拉后，整个下拉窗体每项的样式 */
/* 项的高度（设置pComboBox->setView(new QListView(this));后该项才起作用） */
QComboBox QAbstractItemView::item
{
height: 50px;
}
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover
{
color: rgb(90,100,105);
background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */
}
/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected
{
color: rgb(12, 23, 34);
background-color: lightgreen;
}
/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical
{
width: 13px;
background-color: #d0d2d4; /* 空白区域的背景色*/
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical
{
border-radius: 5px; /* 圆角 */
background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */
}
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover
{
background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */
}
/* 设置为可编辑（setEditable(true)）editable时，编辑区域的样式 */
QComboBox:editable
{
background: green;
}
/* 设置为非编辑（setEditable(false)）!editable时，整个QComboBox的样式 */
QComboBox:!editable
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，点击整个QComboBox的样式 */
QComboBox:editable:on
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，点击整个QComboBox的样式 */
QComboBox:!editable:on
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，下拉框的样式 */
QComboBox::drop-down:editable
{
background: rgb(54,54,54);
}
/* 设置为可编辑editable时，点击下拉框的样式 */
QComboBox::drop-down:editable:on
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，下拉框的样式 */
QComboBox::drop-down:!editable
{
background: rgb(54,54,54);
}
/* 设置为非编辑!editable时，点击下拉框的样式 */
QComboBox::drop-down:!editable:on
{
background: rgb(54,54,54);
image: url(:/resources/up.png); /* 显示上拉箭头 */
}
/* 下拉框样式 */
QComboBox::drop-down
{
subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
subcontrol-position: top right; /* 下拉框的位置（右上） */
width: 32px; /* 下拉框的宽度 */
border-left-width: 1px; /* 下拉框的左边界线宽度 */
border-left-color: darkgray; /* 下拉框的左边界线颜色 */
border-left-style: solid; /* 下拉框的左边界线为实线 */
border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
border-bottom-right-radius: 3px; /* 同上 */
image: url(:/resources/down.png);
}
/* 越过下拉框样式 */
QComboBox::drop-down:hover
{
background: rgb(80, 75, 90);
}
/* 下拉箭头样式 */
QComboBox::down-arrow
{
width: 32px; /* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */
background: rgb(54,54,54); /* 下拉箭头的的背景色 */
padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */
image: url(:/resources/down.png);
}
/* 点击下拉箭头 */
QComboBox::down-arrow:on
{
image: url(:/resources/up.png); /* 显示上拉箭头 */
}QProgressBar
水平样式1
QProgressBar默认是水平效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGh6gwDI-1680185686360)(D:\TyporaImageSave\image-20220619231030170.png)]
qss代码
QProgressBar
{
background:rgb(54,54,54);
border:none; /*无边框*/
border-radius:5px;
text-align:center; /*文本的位置*/
color: rgb(229, 229, 229); /*文本颜色*/
}
QProgressBar::chunk
{
background-color:rgb(58, 154, 255);
border-radius:4px;
}chunk表示里面进度的圆角
水平样式2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCEjj5LC-1680185686361)(D:\TyporaImageSave\image-20220619233341762.png)]
qss代码
QProgressBar
{
border-radius:5px;
background-color:darkgray;
text-align:center
}
QProgressBar::chunk
{
background-color:#1F0FEF;
width:6px;
margin:5px;
}竖直样式表
C++设置
ui->progressBar_2->setOrientation(Qt::Vertical);
ui->progressBar_2->setFixedWidth(60);
ui->progressBar_2->setFixedHeight(300);例如下面的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jllSpeU1-1680185686361)(D:\TyporaImageSave\image-20220619233924079.png)]
qss代码
QProgressBar:vertical
{
border-radius:5px;
background-color:darkgray;
text-align:center;
padding-left: 5px; padding-right: 4px; padding-bottom: 2px;
}
QProgressBar::chunk:vertical
{
background-color:#06B025;
margin:1px;
}其它竖直样式
渐变色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jn9NCndf-1680185686362)(D:\TyporaImageSave\image-20220619234053854.png)]
qss代码
QProgressBar:vertical
{
border-radius:5px;
background-color:darkgray;
text-align:center;
padding-left: 5px; padding-right: 4px; padding-bottom: 2px;
}
QProgressBar::chunk:vertical
{
background-color:QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f);
margin:1px;
}QMenu菜单样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Womz9OOK-1680185686363)(D:\TyporaImageSave\image-20220620001957419.png)]
qss代码
QMenu::item
{
font:16px;
background-color:rgb(253,253,253);
padding:8px 32px;
margin:0px 8px;
border-bottom:1px solid #DBDBDB;
}
/*选择项设置*/
QMenu::item:selected
{
background-color: #FFF8DC;
}四、qss 选择器
1 通配符选择器
匹配所有的控件，用星号表示
* {
background-color:yellow;
}设置后控件窗口背景色都被修改了；
或者指明子类
* QPushButton{
background-color:yellow;
}设置后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e63a1joy-1680185686363)(D:\TyporaImageSave\image-20220620002734951.png)]
2 类型选择器
通过控件类型来匹配控件的(包括子类)
QWidget {
background-color:yellow
}如果想防止子类，例如窗口被修改，可以设置属性
//禁止父窗口影响子窗口样式
setAttribute(Qt::WA_StyledBackground);类选择器也是通过控件类型来匹配控件的，但不同的是不包含子类，语法是在类前面加了个.（是个点）
.QWidget {
background-color:yellow
}
注意类前面有个点这样就只对QWidget生效，如果界面上有其它控件则不生效。
3 ID选择器
ID选择器是结合控件的objectname来匹配控件的，qss里objectname前加个井号来表示，不同控件的objectname是可以相同的
#blue {
background-color:blue
}4 属性选择器
属性选择器是结合控件的属性值来匹配控件的，首先要设定控件的属性，qss里属性用[proterty = attitude]来限制
qt代码
label1.setProperty('notice_level','error')
label2.setProperty('notice_level','warning')qss
.QLabel {
background-color:pink;
}
.QLabel[notice_level='warning'] {
border:5px solid yellow;
}
.QLabel[notice_level='error'] {
border:5px solid red;
}这里还有个用法，就是qss内只定义属性值，只要有这个属性的控件就可以被选中
.QLabel [notice_level]{
background-color:pink;
}
.QLabel[notice_level='warning'] {
border:5px solid yellow;
}
.QLabel[notice_level='error'] {
border:5px solid red;
}只要有novice_level这个属性的控价都是生效的。