Qt界面元素美化之QSS（Qt Style Sheets）样式表

简介

1. Qt程序界面中控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性可以通过Qss文件来设置，美化UI界面。实现界面和程序的分离，快速切换皮肤。

2. Qt样式表是一种强大的机制，它允许您自定义小部件的外观，而不仅仅是通过子类化QStyle已经可以实现的功能。Qt样式表的概念、术语和语法与HTML的CSS样式表类似。

3. 样式表是文本规范，可以使用QApplication::setStyleSheet()在整个应用程序上设置，也可以使用QWidget::setStyleSheet()在特定小部件(及其子部件)上设置。如果在不同级别上设置了多个样式表，Qt将从所有设置的样式表派生有效样式表。这称为级联。

基本语法规则

width:12px; //设置宽度 单位像素
height:40px //设置高度
min-width:65px; //最小宽度 有些时候设置width无效可以尝试设置min-width
min-height:12px; //最小高度
max-width:12px;
max-height:12px;
/设置背景颜色 四种颜色表示方式/
background-color:rgb(255,255,255);
background-color:rgbs(255,255,255,30); //最后一个参数是透明度 0~255
background-color:yellow //常用颜色名（17种标准色与130种其他颜色） 更多见附录
background-color:#FF0000

colo:rgb(255,255,255); //前景色 文本颜色
color: #F5F5F5; //前景(文本)颜色
color: qlineargradient(); //前景(文本)颜色:线性渐变
color: qradialgradient(); //前景(文本)颜色:辐射渐变
color: qconicalgradient(); //前景(文本)颜色:梯形渐变

font-size:20px //字体大小
font-family:黑体 //字体选择 更多字体见附录

margin: 14px 18px 20px 18px; //外边距 顺序上右下左
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;

padding: 4px; //内边距 顺序上右下左 只写一个参数代表相等
padding-left: 5px; /* 文字左边距 /
padding-right: 10px; / 文字右边距 /
padding-top: 3px; / 文字顶边距 /
padding-bottom: 3px; / 文字底边距 */

border:3px solid red //边框—可以分开设置 solid 实线 dotted 点状边框 none无边框 dashed 虚线
border—四条边相同样式
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-width 上 右 下 左 ----- 边框宽度 //3px 边框像素—宽度-单位：像素，也可以em,1em=16px
border-top-width
border-right-width
border-bottom-width
border-left-width

border: 1px solid #FDBC03; /* 边框:宽度 颜色*/
border-image:url(boder.png) 4 8 12 16; /* 边界图 切线 /
border-radius: 4px; /边框圆角半径 /
border-top-left-radius: ; / 角弧度:左上角/
border-top-right-radius: ; / 角弧度:右上角*/
border-bottom-left-radius: ; /* 角弧度:左下角*/
border-bottom-right-radius: ; /* 角弧度:右下角*/

double 双线 groove 定义3D凹槽边框。其效果取决于border-color的值
ridge 定义3D垄状边框。其效果取决于 border-color的值
inset 定义3D inset边框。其效果取决于 border-color的值
outset 定义3D outset边框。其效果取决于 border-color的值

border-color: //边框颜色 上 右 下 左
border-top-color
border-right-color
border-bottom-color
border-left-color

/伪状态列表/
:checked //button部件被选中
:unchecked //button部件未被选中
:disabled //部件被禁用
:enabled //部件被启用
:focus //部件获得焦点
:hover //鼠标位于部件上
:indeterminate //checkbox或radiobutton被部分选中
:off //部件可以切换，且处于off状态
:on //部件可以切换，且处于on状态
:pressed //部件被鼠标按下

/子部件列表/
::down-arrow //combo box或spin box的下拉箭头
::down-button //spin box的向下按钮
::drop-down //combo box的下拉箭头
::indicator //checkbox、radio button或可选择group box的指示器
::item //menu、menu bar或status bar的子项目
::menu-indicator //push button的菜单指示器
::title //group box的标题
::up-arrow //spin box的向上箭头
::up-button //spin box的向上按钮

示例

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyleSheet("QPushButton{border-style:outset;border-width:3px;border-radius:10px;font:15px;background-color: rgb(103,170,113)}"
                    "QPushButton:hover{background-color:rgb(236,165,32);border-radius:10px;font:24px;color: red}"
                    "QPushButton:pressed{background-color:rgba(25,170,61,200); border-style: inset; }");
    MainWindow w;
    w.show();
    return a.exec();
}

三种方式添加样式表

1. 直接在Qt Designer 中添加样式
2. 在代码中使用setstylesheet函数添加样式
3. 创建qss文件添加样式
   无论哪一种添加，都离不开样式表语法，样式表语法由选择器和声明构成，选择器可以指定对谁生效，可以指定不同状态时生效不同的样式，而声明就是样式，这些知识点，下面都将一一说明。

先说第一种，直接在Qt Designer 中添加样式

这种方式的优点就是快，直接，缺点也很明显，就是只能设定一次，应用在固定不变的ui上，这种方法是首选，但是当需要根据当前操作做出对应的变化，第一种方法就不行了，例如按一下按钮变一种颜色，或者调节参数，这时我们就需要第二种方法。

在代码中使用setstylesheet函数添加样式

比如在Qt Designer 上我们拖了一个标签控件，我们就可以在cpp这样来设置样式表：

ui->Lable->setStyleSheet(“background:rgb(150, 190, 60);”);
//注意后面的分号要加上，其实就是把第一种方法里面的样式表，加上双引号放在括号里面就可以了。

利用第二种方法就可以随意更改样式表：

if(xxxx)
{
ui->Lable->setStyleSheet(“background:rgb(150, 190, 60);”);
}
if(xxxx)
{
ui->Lable->setStyleSheet(“background:rgb(150, 100, 100);”);
}

第二种方法也有缺点，就是耦合性高，为了降低耦合性（与逻辑代码分离），我们通常会定义一个QSS文件，来存放样式，也就是第三种方式。

注意：setStyleSheet的设置以最后一次设置为准，每次设置（调用setStyleSheet(“样式”)）都会覆盖之前一次设置的样式。

创建qss文件添加样式

创建qss文件不要使用windows下的记事本，这里推荐使用Nodetad++或者更高级的编辑器。否则可能会出错。
原因是记事本生成的utf-8文件是带bom（自行百度），这个我们无法通过记事本去掉，而Nodetad++可以，尽管qt在编码项目-编码有一个总是bom的选项，但是经测试，没什么用，bom还是存在，可以看一下这个Qt读取qss文件失败或qss不生效解决方案。
我们创建一个qss后缀的文件，并写入

#label
{
background:rgb(100,100,100);
}

   将这个qss文件作为资源文件加载到qt中，创建一个资源文件，并添加现有文件（qss文件）

这种方法在界面样式较复杂时，我们在文件中编写样式，内容比较清晰，降低耦合性（与逻辑代码分离）。

三种方法使用哪一种

对于初学者，我认为第一种方法是首选，因为初学者往往不需要过多复杂控件，对于少量的控件，代码也不是很多，使用第一种方法简单高效，并且可以帮助我们检验样式是否编写正确，这是对于初学者最有帮助。
对于有一点基础的，随着学习的深入，不用我说，也应该感觉到第一种的局限性，也就是我说是的缺点，这个时候就应该使用第二种方法，来弥补第一种方法带来的缺陷，这个时候控件还不是很多，代码写样式表还容易找。
第三种方法就是对于你已经很厉害了，能写出一个自己看得过去的程序了，控件也多了起来，业务逻辑也多了起来，这个时候就可以降低耦合性（与逻辑代码分离），从而使用第三方法。
最终的建议就是说将第二种和第三者方法结合使用，来弥补各自的不足。

[1]:: https://blog.csdn.net/aiwangtingyun/article/details/94462976.
[2]:: https://blog.csdn.net/Fdog_/article/details/108296647.
[3]:: https://doc.qt.io/qt-5/stylesheet-examples.html.