Qt控件样式之QSS
QSS常用于Qt的控件样式美化,合理地使用Qss可以完成在不改动代码的情况下改变Qt界面的样式。
官方提供的例子: http://qt-project.org/doc/qt-4.8/stylesheet-examples.html
这个是官方提供的例子,只有qt-4.8的,目前Qt最新版本是Qt5.4,但似乎在qss这块没有较大的更新,同时有关帮助手册可以在Qt Assistant中寻找。
在这个Qt Style Sheets Reference中有QSS所支持的所有属性、状态,QSS是参照CSS2的,但并非所有的CSS2属性QSS都支持,具体支不支持就需要查一下帮助手册了。
QSS的语法和CSS的语法保持一致
selector {declaratin1; declaratin2; …declaratinN; }
拿最简单的QPushButton来看
QPushButton { // selector
color: red; //
border: none; // / declaration
}
declaration部分就是一系列的properties: values
在使用属性:值的时候曾经碰到过一个小问题。
QLabel {
background: url (“xxxx”); // 如果在url后面有空格,这句属性将不起效果
}
由于自己在写C/C++代码的时候有在函数名后加空格的习惯,导致了这个错误,需要注意一下。
上面直接使用QPushButton或是QLabel将会对所有的该类控件引起效果,有些时候我们并不希望这样,所以这个时候需要指定选择器来区分要操作的对象。
关于选择器的一些介绍可以看这篇博文,虽然也是转载的http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html
稍微总结一下常用的。
QSS 中最常用的当属ID选择器了,用#号区分
QLabel#thisIsLabel {
color: red;
}
用了ID选择器以后,将只会有这个ID对应的控件会产生样式效果。拿这个ID怎么来的呢?一般通过setObjectName指定的,像对这个QLabel进行设置,就必须在代码中加上thisIsLabel->setObjectName (“thisIsLabel”);
但通常从Designer中命名好的控件不用特意加上setObjectName是因为在系统生成的ui头文件中已经帮你做了这件事儿了,所以在用的时候千万不能QLabel#ui->thisIsLabel 这样,ui是命名控件,这样写是非法的。
属性选择器有些时候也会有妙用,比如当你的一个控件需要因为一个属性的改变而希望样式改变的时候,就需要用到属性选择器。
复制代码
QLabel#thisIsLabel[enable=true] {
color: red;
}
QLabel#thisIsLabel[enable=false] {
color: blue;
}
复制代码
[] 中括号内部的就是选择的属性,属性名和value都需要通过setProperty这个函数实现。
下面这个是Qt Assistant关于这个函数的介绍,这个函数除了指定属性为QSS服务以外还有很多其他的用法,这里暂不做讨论。
我基本上就使用这两种选择器能完成大部分的设计了。
然后就是一些子控件选择器了,如 QAbstractItemView 的::item, QScrollBar的::handle。
这些以::开头的都表示控件的子控件选择器,为什么说是子控件,因为一个控件可能是由多个子控件组成的,我们在改变样式的时候自然也希望改变其子控件的样式。
像:hover, :pressed, :checked这些都是伪指示器,活用这些可以实现控件的三态效果(普通,悬停,按下),但要注意的是并不是所有的控件都会有这些效果的,QLabel就没有,但如果想实现QLabel的三态效果也不是不可以,可以使用事件过滤器去捕获QLabel的enterEvent和leaveEvent实现hover,使用mousePressEvent实现pressed,只是QLabel本身是不支持的,具体哪些控件支持哪些功能,可以查阅Qt Style Sheets Reference
伪指示器也是支持!(否定符号)的
QPushButton#myBtn:!pressed {
color: red;
}
这样就表示在鼠标没有按下的情况下字体颜色是红色的。
掌握QSS的基础知识 + 懂CSS2语法基本就能进行QSS样式设计了。
QSS在代码中可以通过setStyleSheet ();的方式将样式设置进去,但同时也可以通过加载样式文件的方式,我通常喜欢把所有的QSS放在xxx.qss文件中进行统一管理。
QApplication a (argc, argv);
File_operate file_opt;
QByteArray array = file_opt.read_file (FILE_STYLE_PATH);
array += file_opt.read_file (FILE_STYLE_ADD_PATH);
a.setStyleSheet (QLatin1String (array));
File_operate是我根据QFile封装的一层类,增加了一些日志和判断
这里我用到了两个路径,为了实现换肤的效果,第一个路径文件里面放置的QSS基础样式,而第二个路径文件里面放置的是要拓展改变的样式,这样我可以通过加载不同的文件来实现样式的快速切换。
在使用QSS的时候还发现了一些小BUG,可能不能算BUG,但如果用CSS习惯将会实现不了的功能。
有这样一张图片
图片的尺寸是26032, 而我希望在2632的一个label上面显示这张图片,我所能想到的两个属性是background和border-image
如果拿background来做,就需要用到background-position这个属性
backgroud:#FFF url(image) no-repeat [fixed | scoll] x y;
#FFF 表示背景色
image 表示图片资源路径
no-repeat 表示图片是否重复
fixed 表示不滑动 scroll 表示滚动 默认为scroll
x y 表示图片的偏移量,也就是background-position这个属性
在CSS语法中,x y 可以用百分比或者px表示,也可以使用left、right、top、bottm、center这五种对齐方式
而在这个应用中我采用了这句语法发现是不起效果的
background: url(:/C:/Users/xx/Desktop/days_nums.png) no-repeat fixed 26px 0px;
我希望的显示1这个数字,实际上没有任何效果,当然采用百分比的方式
background: url(:/C:/Users/xx/Desktop/days_nums.png) no-repeat fixed 10% 0%;
效果依旧和前一种一样,而使用对齐方式表示,则生效了
background: url(:/C:/Users/dp/Desktop/days_nums.png) no-repeat fixed right;
这样就会显示最右边的数字9
不知道是否是我“打开方式有误”,感觉如果不能使用数字和百分比的话我就无法实现我的需求了,这个时候就只能思量border-image这个属性了,关于border-image,这里有篇非常好的文章解释了其用法 戳这里
使用border-image实现上面需要的功能,就要利用其剪裁特性,其实就是左一刀右一刀上一刀下一刀,对于border-image而言,剪裁后会留下周围一圈的切片,可以通过单独对这些切片处理就获得了想要的border,看到这个之后发现,如果要实现背景的阴影也只需要拿一张含有阴影的图片裁剪成九宫格,然后可以随意扩展top、right、bottom、left的尺寸,再和4个角拼接起来。
border-image: url(:/C:/Users/xx/Desktop/days_nums.png) 0 208 0 26 stretch stretch;
这里的0、208、0、26分别是top、right、bottom、left的裁剪坐标,这句语句所形成的效果是,把1这个数字显示在了32*26的QLabel上了,可是从上面分享的那篇文章来看,border-image显示的应该是边框,不应该是中间那块,我表示比较纳闷,除此之外,这条语句依旧不支持百分比
border-image: url(:/C:/Users/xx/Desktop/days_nums.png) 0% 80% 0% 10% stretch stretch;
这样原来应该和数字表示的形成一样的效果,结果发现这条语句也将不起作用,这是否算是QSS遗留的一些BUG呢?
关于这些“BUG”只是自己摸索的,或许哪些地方没有考虑到,请各位大神指点。
一点点小小的总结,希望对Qt初学者有所帮助,不足之处望指出。
Qt控件样式之QSS相关推荐
- Qt控件样式 Style Sheet Demo
Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使用 Qt 您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序:深 ...
- Qt 常用控件样式表及遇到的问题
Qt界面美化常用到样式表,用好样式表能达到不一样的效果. 样式表用法 常用控件样式表用法如下: /**********子界面背景**********/ QWidget#customWidget {ba ...
- qss设置平面按钮_QSS基础-设置控件样式
1.QSS基础-设置同类控件样式 ''' QSS基础:Qt Style Sheet Qt样式表 用于设置控件的样式和风格(比如控件的背景色,字体颜色,字体大小等) 和CSS的功能比较相似,功能相似 ' ...
- 大量的QT控件及示例发放,求泛滥
大量的QT控件及示例发放,求泛滥 2017年01月13日 14:36:22 阅读数:781 在论坛中,看到一位朋友介绍http://qt-apps.org/站上有很多好的资料和示例,现在发出来,与大 ...
- WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...
- 共享几套silverlight2 toolkit最新的皮肤控件样式下载
下载了最新的silverlight2 toolkit看看,发现里面的控件样式还是多漂亮的,与大家分享下. blue dark light orange purple red 样式源码下载:点击下载 当 ...
- Qt 实现QT控件中的QLabel显示图片并自适应显示
一.需求 实现QT控件中的QLabel显示图片,并自适应显示. 二.代码 QImage Image; Image.load(":/image/image/logo.jpg"); Q ...
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- QT控件出现乱码问题
问题描述: 在使用qt控件显示汉字的时候会变成乱码,记录下来! 解决方式: QT5之前的方式: #include <QTextCodec>int main(int argc, char * ...
最新文章
- LibreOffice 支持无障碍辅助的 5 种方式
- c语言编程:输入一个数看它是不是素数
- 02.Python网络爬虫第二弹《http和https协议》
- java 常见几种发送http请求案例
- 设置eclipse文件的默认打开方式
- 华为云FusionInsight+永洪BI共建政企用数之道,普惠千行百业
- 工作31:传参对接口
- Diy页面服务端渲染解决方案
- 如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景
- python语言的jenkinapi
- Hive ntile函数
- 极路由2hc5761刷华硕固件_极路由3华硕固件下载-极路由3 Pro刷华硕固件官方完整版【附升级工具及教程】-东坡下载...
- drozer安全评估框架基础使用技法
- 轻量级封装DbUtilsMybatis之四MyBatis主键
- select函数到底该怎么用?
- JavaScript实现人民币大小写转换
- 微信小程序集合3(百度小说+电商+仿哗哩哗哩小视频+码绘本跟读+科学计算器+身份证查询+天气+投资理财微+外卖+在线音乐排行)
- 彗星mysql_【What if 系列】彗星与棒球
- xilinx vivado 2019 cordic ip 计算sin cos
- 表观修饰的“当红炸子鸡” - 组蛋白乳酸化
热门文章
- 新手如何进入UI设计行业?怎么提升专业技能
- 3u8633还在飞吗_5月14日3U8633航班在成都迫降危险性有多大?附刘机长专访
- linux如何系统版本信息,【教程】如何查看Linux系统版本信息
- 华为发布智能云网“五个一”新能力,助力运营商完成云与网的价值归一
- java 定义数组属性_Java数组的定义与使用
- 化合物相似性搜索_FTrees——Similarity相似性搜索
- 这个最漂亮和用户友好的 Linux 发行版,真是越来越香了
- kensington安全锁_备用电源-Kensington 120W笔记本电源适配器
- exe4j安装及下载
- adaboost 算法 原理