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基础样式,而第二个路径文件里面放置的是要拓展改变的样式,这样我可以通过加载不同的文件来实现样式的快速切换。

一点点小小的总结,希望对Qt初学者有所帮助,不足之处望指出。

时间: 2024-08-05 21:04:38

Qt控件样式之QSS的相关文章

Qt控件样式 Style Sheet Demo

迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使用 Qt 您只需一次性开发应用程序,无须重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序:深感强大的功能就是支持校本化和样式文件化,对于做web开发的同学能很快上手,强烈推荐.以下是Qt部分控件的样式写法例子,仅作参考,看着跟css3是不是很像. 1 *{font-size:15px;

qt 设置程序控件样式

1. 以资源文件的形式设置控件样式QFiledata(QString(":/style.qss"));QStringqssFile;if(data.open(QFile::ReadOnly)){QTextStreamstyleIn(&data);qssFile=styleIn.readAll();data.close();qApp->setStyleSheet(qssFile);}qt 设置程序控件样式

十三、Android学习笔记_Andorid控件样式汇总

<!-- 设置activity为透明 --> <style name="translucent"> <item name="android:windowBackground">@color/translucent</item> <item name="android:windowIsTranslucent">true</item> <item name="an

android shape总结 和控件样式定制

1:shape总结 1):shape文件是放置在drawable文件下的.res/drawable/filename.xml. 2):shape类型:android:shape.一共有四种:rectangle,oval,line,ring. 3):corners标签:定义圆角.当且仅当控件类型位rectangle时才有作用.android:radiuse位圆角的半径.当然也可以单独为每个圆角进行设置. 4):gradient标签:颜色渐变. android:angle:颜色渐变的方向.0是从左到

Android学习笔记_75_Andorid控件样式汇总

<!-- 设置activity为透明 --> <style name="translucent"> <item name="android:windowBackground">@color/translucent</item> <item name="android:windowIsTranslucent">true</item> <item name="an

arcgis api for js共享干货系列之二自定义Navigation控件样式风格

arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义一个NavigationControl控件类,最终实现的效果如下图: 思路如下:其实就是在网上参照天地图或者谷歌地图的Navigation风格样式,下载它们的图片模版,然后自己创建div来实现图片的缩放平移.全图.左右上下平移等等地图导航功能: Navigation图片目录如下: 调用函数: //显

Silverlight控件样式——TabControl

写Silverlight程序已有一年有余,一步步走来满是收获却疏于积累与分享.在此空闲时间,将过去重写过的控件样式一一记录,便于查阅,也希望能起到抛砖引玉之效.如有编写和使用上的问题,均可发邮件到zdp06623#163.com(#替换为@)反馈与问询. 控件修改后效果 控件使用注意事项 该控件由系统自带控件TabControl重写而来,样式仿Chorme选项卡.使用过程中需要注意几点: 1.第一个选项卡样式与其他选项卡样式有所差异,需要分别引用FirstGreenTabItemStyle样式和

Java Swing控件样式设置

1.设置JTable的背景色 一般情况下,设置JTable背景色的时候,只能设置有数据行的背景色,对于默认的底色部分还是没法设置,默认为灰色,这时需要设置JTable上层容器jScrollPane1的背景色才能改变JTable的背景色,如: this.jScrollPane1.getViewport().setBackground(new Color(240,240,240)); 2....... Java Swing控件样式设置

Qt控件中的属性sizePolicy说明

1. Fixed: 大小不能改变 2. Minimum: 已经是最小, 不能再被缩小, 但能放大. 3. Maximum: 已经是最大, 不能再被放大, 但能缩小. 4. Preferred:  控件的sizeHint()是他的sizeHint, 能被缩小, 放大. 5. Expanding: 控件可以自行增大或者缩小. Preferred与Expanding同时存在时,Expanding会变化,Preferred使用sizeHint()不变化Qt控件中的属性sizePolicy说明