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应用程序。
二、名词解释:
- 选择器(selector)
意思是:选择特定的类,一般为一个可以定制样式表的Qt类,所有可以作为选择器的Qt类都在五、样式参照表:2. 可以应用样式表的窗口部件表=选择器中列出,选择器的格式参照五、样式参照表: 1样式选择器类型表。
所谓的选择器可以理解为CSS中的选择器,他指定了一类部件进行设计。 - 辅助控制器(sub-control)
辅助控制器 一词是相对于选择器存在的,可以理解为我们选择了一个部件,例如一个QCheckBox, 这个部件它分为两个部分,文本部分和可以点击的小窗口的部分。而这个可点击的小窗口部分我们要单独的设置,就要再次分离出来,就需要::indicator(QCheckBox有这个辅助控制器)来设置,如下例题:
QCheckBox::indicator{
width:20px;
height:20px;
}
/说明是在QCheckBox中的指示符(indicator)宽为20px,height为20px。/
辅助控制器是用 :: 双冒号进行指定。
如果没有::indicator那么我们这个小例子将是对整个QCheckBox设置的,使用了辅助控制器的时候就自动分离出这个小窗口,对小窗口进行设置。
不同的选择器有不同的辅助控制器,具体可查看五、样式表参照表:3. 辅助控制器列表
中详细介绍相应的辅助控制器在不同的类中应用,详细说明在类中的什么位置。 - 状态(pseudo-states)
除了辅助控制器对一个部件的分离,样式表还可以根据窗口部件的各个状态来设置窗口。例如hover表示鼠标划过时的状态,例子如下:
QCheckBox:hover{
color: red;
}
/例子说明只有当鼠标滑过复选框文本时变为red/
状态是用 : 冒号进行区分每一个状态。
更详细的状态列表在五、样式表参照表:3 状态列表中查找
状态可以多个一起使用,也可以和辅助控制器一起使用,这样设置窗口部件的时候分的会更加详细。
如下小例子:
QCheckBox:hover,QCheckBox:checked{
color:red;
}
QPushButton::hover{
color:red;
} - 属性
它是一个窗口部件所固有的特征、性质,每一个窗口部件都会有属于他们自己的属性。如前面做的小例子中我们一直未曾提过color,width,height等。组合多个属性同时使用设计出多种效果。五、样式表参照表:4 属性列表查找有更多的详细介绍。 - 值
是属性 : 后面跟随的一组数字,颜色或者是一个bool类型等这些我们称它为值,这些值决定了窗口部件的最终的展示效果。
查看值的表达方式
五、样式表参照表:4 值列表
6.逻辑否(!)
有时候我们在设置某种状态的属性时,希望同时在某些非(!)的状态下设置,这个时候我们就要用(!)来选择某种状态,比如!checked 、!has-children(没有子目录)等等。 - 盒模型(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.可以应用样式表的窗口部件表 = 选择器