关于QT的样式表

Qt 之样式表的使用——设置样式的方法

没什么可以写的，只是移植而已
先记录资源的加载

在网上找了很多资料。但试过之后，都没能实现创建qss文件到Qt项目工程中。一下是从网上看到的资料和自己的总结：

1、创建Qt项目工程，创建完成后，右键项目工程名称弹出菜单，选择“添加新文件”，此时可以看到新建文件窗口，选择“Qt”项--->选择“Qt资源文件”。此时先不着急输入名称，可以点击“浏览”按钮，打开工程所在的目录下，在此目录下创建名称为“resource”文件夹，选择“resource”文件夹。输入资源名称可为“qss”点击“下一步”-->点击“完成”。

2、将之前准备好的图片素材放入到“resource”目录下（最好将图片素材放到一个目录下后放入resource中），右键“*.qrc”目录，选择“添加现有文件”--->选择已放入resource目录下的文件。此处注意prefix最好为“/”，否则在调用时会找不到文件。

3、添加.qss文件。右键“*.qrc”--->选择“add prefix”--->在弹出的窗口中输入“/Qss”。操作完成后，到对应的“resource”目录下创建“Qss”文件夹，并在文件夹内创建扩展名称为".qss"。即可大功告成。

4、通过传入路径\文件名称的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就能够使qss生效。

实例链接：https://download.csdn.net/download/qq_16093323/10442589

注意：

   如果图片为jpg或bmp，直接更改扩展名为png会出现无法加载图片的情况，其原因为是通过png文件格式解析图片数据。可通过其他方式将jpg或bmp导出为png格式。Qt也可直接识别jpg图片数据格式。

————————————————
版权声明：本文为CSDN博主「WANGZHEN`」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_16093323/article/details/80098632

https://blog.csdn.net/weixin_34138377/article/details/90524961?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

上面为Qt加载QSS资源的步骤与链接

CommonHelper::setStyle(":/qss/qss.qss");

注意：如上图的话才能正确的加载资源。

加载完资源之后才能正确的对文件进行内部解析。

//

嗯 Qt样式使用说明
一、声明：
1．文档说明：
 学习Qt样式表前提：
如果你了解CSS，那么我相信这对你来说会很容易理解并应用于实际界面美化，它与CSS有些相似之处，当然如果同时也了解Qt，那么你会很快学会如何运用Qt样式为程序设计出漂亮的界面。
 阅读本说明文档：
首先一、阅读声明，二、名词解释，三、语法简介，六、附属例题解释，每次实验并对照着五、样式表参照表，体会并学习如何运用样式表里关键词。
 样式表参照表之间的关系很复杂：
很多需要重复描述的选择器、属性、值，但由于本文档不能跳转，所以要自己去查找，按照它语法关系层层迭代定位表格，并按照字母表顺序定位要查找内容的大概范围。
这里的表格以Qt help文档为准。
 暂不介绍：
为了尽快完成本文档的初步可使用的目的，很多在本程序中暂时用不到的窗口部件暂未解释介绍，窗口部件介绍表格中会提到“暂不介绍”，但是辅助控制器，属性，值都是完全展示在表格中。
 附加的例题格式说明：
例子是经过实验得出的结论，用C语言的注释方式添加到相应的样式代码后面，当然你的文件( .CSS) 同样满足这个注释方式。
/* 注释内容 */
/*imagesForExample: example_for_XXX000.png */实例图片
 如何做实验：
Qt源码bin目录下的designer.exe,运行/拖入控件/右键/改变样式表/应用；
Qt Creator也可以。
 遇到问题请尽快联系作者
2．背景介绍：
Qt为图形界面应用程序提供一个完整的C++应用程序开发框架。
Qt的样式表主要是受到CSS的启发，通过调用QWidget::setStyleSheet()或 QApplication::setStyleSheet()，你可以为一个独立的子部件、整个窗口，甚至是整个应用程序指定一个样式表。样式表由影响窗口部件绘制的样式规则组成。这些规则都是普通文本。由于在运行时会解析样式表，所以可以通过定制样式表的方式来尝试设计不同的Qt应用程序。
二、名词解释：

1. 选择器（selector）
   意思是：选择特定的类，一般为一个可以定制样式表的Qt类，所有可以作为选择器的Qt类都在五、样式参照表：2. 可以应用样式表的窗口部件表=选择器中列出，选择器的格式参照五、样式参照表： 1样式选择器类型表。
   所谓的选择器可以理解为CSS中的选择器，他指定了一类部件进行设计。
2. 辅助控制器（sub-control）
   辅助控制器 一词是相对于选择器存在的，可以理解为我们选择了一个部件，例如一个QCheckBox， 这个部件它分为两个部分，文本部分和可以点击的小窗口的部分。而这个可点击的小窗口部分我们要单独的设置，就要再次分离出来，就需要::indicator(QCheckBox有这个辅助控制器)来设置，如下例题：
   QCheckBox::indicator{
   width:20px;
   height:20px;
   }
   /说明是在QCheckBox中的指示符（indicator）宽为20px，height为20px。/
   辅助控制器是用 :: 双冒号进行指定。
   如果没有::indicator那么我们这个小例子将是对整个QCheckBox设置的，使用了辅助控制器的时候就自动分离出这个小窗口，对小窗口进行设置。
   不同的选择器有不同的辅助控制器，具体可查看五、样式表参照表：3. 辅助控制器列表
   中详细介绍相应的辅助控制器在不同的类中应用，详细说明在类中的什么位置。
3. 状态（pseudo-states）
   除了辅助控制器对一个部件的分离，样式表还可以根据窗口部件的各个状态来设置窗口。例如hover表示鼠标划过时的状态，例子如下：
   QCheckBox:hover{
   color: red;
   }
   /例子说明只有当鼠标滑过复选框文本时变为red/
   状态是用 : 冒号进行区分每一个状态。
   更详细的状态列表在五、样式表参照表：3 状态列表中查找
   状态可以多个一起使用，也可以和辅助控制器一起使用，这样设置窗口部件的时候分的会更加详细。
   如下小例子:
   QCheckBox:hover,QCheckBox:checked{
   color:red;
   }
   QPushButton::hover{
   color:red;
   }
4. 属性
   它是一个窗口部件所固有的特征、性质，每一个窗口部件都会有属于他们自己的属性。如前面做的小例子中我们一直未曾提过color,width,height等。组合多个属性同时使用设计出多种效果。五、样式表参照表：4 属性列表查找有更多的详细介绍。
5. 值
   是属性 : 后面跟随的一组数字，颜色或者是一个bool类型等这些我们称它为值，这些值决定了窗口部件的最终的展示效果。
   查看值的表达方式
   五、样式表参照表：4 值列表
   6.逻辑否（！）
   有时候我们在设置某种状态的属性时，希望同时在某些非（！）的状态下设置，这个时候我们就要用（！）来选择某种状态，比如!checked 、!has-children（没有子目录）等等。
6. 盒模型（The Box Model）
   这个模式指定了4个影响布局的矩形，从而绘制一个自定义的窗口部件。
   1.Content rectangle是最里面的矩形，它绘制窗口部件内容（如文字，图片）的地方。
   2.padding rectangle包围content rectangle。它负责由padding属性指定填充操作。主要是窗口部件内容与边缘线(border)之间的空隙，它可以用top，right，bottom和left设置它的大小。
   3.border rectangle 包围padding rectangle。它为边界预留空间。可以认为是窗口的外框线。下面讲的分割图形的方法中把border当做是一个区域来理解的。参考四、高级应用：九宫格分割法
   4.margin rectangle 最外面的矩形，他包围border rectangle，负责指定的边缘空白区域，主要是负责与其他的窗口部件的距离。
   如果没有指定他们四个，则默认是四个重合在一起的。
   如图：
   
   8.角弧度
   窗口部件四个角弧度。radius设置角的弧度，如border-radius:4px;
   角的弧度是4px。
   9.背景色和前景色
   部件的前景色用于绘制窗口部件上面的文本，可以通过color属性指定。
   背景色用于绘制窗口部件的填充矩形，可以通过background-color属性指定。
   背景图片使用background-image属性定义，它用于绘制由background-origin指定在盒模式中四个区域的图片开始显示的起点位置。背景图片在盒模式域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。
   如果指定的背景图片具有alpha通道（透明效果），通过background-color指定的颜色将会透过透明区域。在background-color属性中有介绍。
   10.（#）
   指定某一个按钮，#号后面是指定类的对象名。要知道代码才能运用。
   三、语法介绍与问题解决：
   1.语法
    选择器 {
   属性 : 值 ;
   }
   QPushButton{
   color：red；
   }

 选择器 : 状态{
属性 : 值 ;
}
QPushButton ：hover{
color ：red；
}

 选择器 :: 辅助控制器{
属性 : 值;
}
QCheckBox：：indicator{
color：red；
}

 选择器 :: 辅助控制器 , 选择器 :: 辅助控制器{
属性 : 值;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

 选择器 : 状态 , 选择器 : 状态{
属性 : 值;
}
QPushButton:hover, QPushButton:pressed{
color : red;
}

 选择器 , 选择器 , 选择器{
属性 : 值;
}
QLineEdit，QPushButton，QCheckBox{
color ：red；
}

你可以任意的组合，当然这只是简单的组合，还有更加复杂的组合。
1.可以先查看一下选择器的表达方式，考虑一下是只对一个类进行操作还是，对整个界面操作，仔细阅读整个表格1.样式选择器类型表确定应用哪种样式表。
2.选择器的格式确定后，就要确定你要所要针对的具体的类型，那么就参照2.可以应用样式表的窗口部件。
3.之后就查看你所要应对的选择器里的部分进行设置，就要再去查看辅助控制器。
4.再分的细一点，搞清楚一个窗口部件分为几个状态，鼠标划入，点击，关闭…
他们决定了你所要设置状态的属性设置。
5.定位了前面的，就要改变他的特性了，也就是进行属性设置，查找属性表，对应属性表超找对应的值表，也有可能还要通过值表的迭代（值的值还需要一个方式表达。）最终知道这个值是数字，还是一个颜色，或者是一个bool类型，抑或是其他的关键词(如padding、content…)。仔细阅读他们之间的关系。
2.遇到问题
也许你已经组合了很多的样式表，但是有时候你会发现，有时候有些属性值不起作用，或者说图像变形，并不是你所要看到的效果，不要着急。
1.查看一下你的语法是否正确，如果你保证确保无误的话，那么就想一想，是否是在构建这个窗口控件之前进行设置的，这个会影响到你的属性是否被读入。参考六、附属例题解释：32. 定制QTool查看是否被其他的属性覆盖。当一个属性被具有同一选择器的几个规则设置时，那么只有最后一个规则起作用（这是一个难点）。
2.查看是否有相应的关联的属性已被设为bool=1。
3.图片无法显示：查看路径是否正确在Qt中是”/”代替window下的”\”,使用相对路径，本应用程序的相对路径（是相应程序读取这个样式css文件），当然你也可以写绝对路径的方式读取图片，但是路径这个方法是不提倡的。
4.大小变化的窗口控件是否背景图片选择了border-image。详细参考四、高级应用与六、附属例题解释：34.QPushButton与image
四、高级应用：
1.九宫格分割法：
之所以叫做九宫格分割法是源于，把边界图分为3X3的小格，当填充窗口部件时如图A，4个角保持不变，如图B,

其他的5个格子被拉伸或者平铺填充可用的空间。
使用border-image属性可以指定各个边界图，他要求指定一个图像文件名和定义9个格子的4条“切线”。切线用到上、右、下和左边缘的距离定义。Border.png作为边界图，距离上、右、下和左的切线为4、8、12和16应该如下定义：
border-image：url（boder.png） 4 8 12 16;
但使用边界图时，必须显示地设置border-image属性。一般情况下，border-width应该与切线的位置一致；否则，为了与border-width相符合，角上的格子将被拉伸或者缩短。对border.png应该这样设置指定他的四个边框的宽度：
border-width: 4px 8px 12px 16px;
这样才能把刚才切割的四个角的图片完全的放置到border中当做border区域的背景。
2.渐变器
Qt支持三种渐变器查看例题5.渐变器
1.线性渐变（qlineargradient）：连接这两点的线上有一系列的颜色断点。两个控制点之间的不同位置指定不同的颜色。位置用0和1之间的浮点数来确定，0对应着第一个控制点，1对应着第二个控制点。两个指定断点之间的颜色由线性插值得出。
2.辐射渐变（qradialgradient）：有一个中心点（xn，yn），半径r，一个焦点（xf，yf）以及颜色断点定义。
中心点和半径定义一个圆。颜色从焦点向外扩散，焦点可以是中心点或者圆内的其它点。
3.梯形渐变（qconicalgradient）：由一个中心点（xn，yn）和一个角度a定义。颜色在中心点周围像钟表的秒针扫过一样扩散。
五、样式表参照表：
1.样式选择器类型表

2.可以应用样式表的窗口部件表 = 选择器