QT控件Demo与样式加载与使用

前言

在我们的开发过程中，使用控件通常通过样式来实现的，下面的几个控件就是使用样式来实现的。

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这个属性的控价都是生效的。