Qt qss 使用
1.在资源文件建立一个qss文件。如blue.qss
2. 调用
#include "mainwindow.h"
#include <QApplication>
#include<QFile>
#include "mainframe.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv); QFile qss_file(":/res/blue.qss");
qss_file.open(QFile::ReadOnly);
qApp->setStyleSheet(qss_file.readAll());
qss_file.close();
//MainWindow w;
//w.show();
MainFrame w;
w.show();
return a.exec();
}
如果控件是代码建立的,需要使用id选择器方法用setObjectName指定id 名字,如下:
QLabel *lblWindowTitle = new QLabel(this);
//lblWindowTitle->setStyleSheet("color: rgb(255, 255, 255);font: 75 12pt \"Verdana\";");
lblWindowTitle->setObjectName("lblWindowTitle");
QLabel#lblWindowTitle{
background:transparent;
border-style:none;
color: rgb(, , );
font: 12pt "Verdana";
}
QPushButton#btnNavRealImage,QPushButton#btnNavScan,QPushButton#btnNavBrowse{
width:70px;
height:40px;
text-align: center;
color:white;
font-style:normal;
border:5px;
}
QPushButton#btnNavRealImage:hover,QPushButton#btnNavScan:hover,QPushButton#btnNavBrowse:hover{
background-color:#549cd8;
}
3.
一、QSS语法
同css一样,他也有由一个selector与一个declaration组成,selector指定了是对哪一个控件产生效果,而declaration才是真正的产生作用的语句。如: QPushButton { color: red } QPushButton指定了是对所有的QPushButton或是其子类控件(如用户定义的MyPushButton)产生影响,而color:red表明所有的受影响控件的前景色都为red。 除了“类名”,“对象名”,“Qt属性名”这三样东西是大小写敏感的外其他的东西都是大小写不敏感的,如color与Color代表同一属性。 如果有几个selector指定了相同的declaration, 可以使用逗号(,)将各个选择器分开,如: QPushButton, QLineEdit, QComboBox { color: red } 他相当于: QPushButton { color: red } QLineEdit { color: red } QComboBox { color: red } declaration部份是一系列的(属性:值)对,使用分号(;)将各个不同的属性值对分开,使用大括号({})将所有declaration包含在一起。
1、 一般选择器(selector)
Qt支持所有的CSS2定义的选择器,其祥细内容可以在w3c的网站上查找http://www.w3.org/TR/CSS2/selector.html , 其中比较常用的selector类型有:
- 通用类型选择器:* 会对所有控件有效果。
- 类型选择器:QPushButton匹配所有QPushButton的实例和其子类的实例。
- 属性选择器:QPushButton[flat=”false”]匹配所有QPushButton属性flat为false的实例,属性分为两种,静态的和动态的,静态属性可以通过Q_PROPERTY() 来指定,来动态属性可以使用setProperty来指定,如: QLineEdit *nameEdit = new QLineEdit(this); nameEdit->setProperty("mandatoryField", true); 如果在设置了qss后Qt属性改变了,需要重新设置qss来使其生效,可以使用先unset再set qss。
- 类选择器:.QPushButton匹配所有QPushButton的实例,但不包含其子类,这相当于:*[class~="QPushButton"] ~=的意思是测试一个QStringList类型的属性是否包含给定的QString
- ID选择器:QPushButton#okButton对应Qt里面的object name设置,使用这条CSS之前要先设置对应控件的object name为okButton,如:Ok->setObjectName(tr(“okButton”));
- 后裔选择器:QDialog QPushButton匹配所有为QDialog后裔(包含儿子,与儿子的儿子的递归)为QPushButton的实例
- 子选择器:QDialog > QPushButton匹配所有的QDialog直接子类QPushButton的实例,不包含儿子的儿子的递归。
2、子控件选择器
- 对于复杂的控件,可能会在其中包含其他子控件,如一个QComboxBox中有一个drop-down的按钮。那么现在如果要设置QComboxBox的下拉按钮的话,就可以这样访问: QComboBox::drop-down { image: url(dropdown.png) }其标志是(::)
- 子控件选择器是用位置的引用来代表一个元素,这个元素可以是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin属性可以改变子控件的默认放置位置,如: QComboBox { margin-right: 20px; } QComboBox::drop-down { subcontrol-origin: margin; }
如上语句可以用来改变drop-down的margin。 - 相对位置属性可以用来改变子控件相对于最初位置的偏移量,如当一个QCombox的drop-down按钮被按下时,我们可以用一个内部的小偏移量来表示被按下的效果,如下: QComboBox::down-arrow { image: url(down_arrow.png); } QComboBox::down-arrow:pressed { position: relative; top: 1px; left: 1px; }
- 绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了,这些子控件就可以被当成一般的widget来对待,并且可以使用合模型。关于合模型可以参考下面。
如果你要查看Qt支持哪些子控件选择器,可以参考:http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、伪选择器(pseudo-states)
- 伪选择器以冒号(:)表示,与css里的伪选择器相似,是基于控件的一些基本状态来限定程序的规则,如hover规则表示鼠标经过控件时的状态,而press表示按下按钮时的状态。如: QPushButton:hover { } 表示鼠标经过时QPushButton背景变红。
- Pseudo还支持否定符号(!),如: QRadioButton:!hover { color: red } 表示没有鼠标移上QRadioButton时他显示的颜色是red。
- Pseudo可以被串连在一起,比如: QPushButton:hover:!pressed { color: blue; } 表示QPushButton在鼠标移上却没有点击时显示blue字,但如果点击的时候就不会显示blue颜色了。
- 同样可以和之前所讲的子控件选择器一起联合使用,如: QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }
- 与前面所讲的一样,伪选择器,子控件选择器等都是可以用逗号(,)分隔表示连续相同的设置的,如: QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下
- 更多请参考:http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states
二、 解决冲突
- 使用object name使用伪选择器,如hover,press,enabled等,如:按扭“1”是disable了的,QPushButton:!enabled {color: white}
- 在程序里面要先设置控件的,如: btnOne = new QPushButton(centralWidget); btnOne->setObjectName(QString::fromUtf8("btnOneCh"));
- 这样,我们有了一个object name为btnOneCh的QPushButton,试验一下,使用指定object name的方式,如: QPushButton#btnOneCh { color: red } QPushButton { color: white } 可以看出,btnOncCh的color变成了red
- 所有的类型选择器都有一个共同的特性,就是如果有两个属性冲突了的话就会以最后出现的一个为准,如: QPushButton { color: red } QAbstractButton { color: gray } 由于QPushButton为QAbstractButton的子类,如果只设置QAbstractButton的可以想像结果是所有的QPushButton都为gray, 如果只设置QPushButton的所有QPushButton都会为red,当两个都能设置起效的时候,以在文本上最后出现的为准,所以结果为Grey
- 当然其中如果有#指定了object name,他所设置的优先级是最大的,具体规则可以参考:http://www.w3.org/TR/CSS2/cascade.html#specificity,或是http://pepper.troll.no/s60prereleases/doc/stylesheet-syntax.html#conflict-resolution QPushButton#btnOneCh { color: red } QPushButton { color: blue } QAbstractButton { color: gray } 虽然QAbstractButton在最后,但是之前有#btnOneCh指定了QPushButton“一”的color为red所以最后显示也是“一”为red。
三、级联效应
- 子类可以继承父类的StyleSheet,但是如果子类里面设置了StyleSheet与父类里在设置的有冲突,那么当然会优先考虑子类自己的, 同样,如果在qApp时面设置了,但是在某一个特定控件里面也设置,如果有冲突,也是优先控件自己的,例如,我在程序时面设置了:btnOneEn->setStyleSheet("QPushButton { color: red }"); 而,当我再设置qApp时,如果,将QPushButton的color设置成grey的,那么结果是对于btnOneEn这个QPushButton来说他的颜色还是red。 这就是为什么这里设置为grey了btnOneEn却还是red的。
- 如果我们对一个控件设置StyleSheet为: QPushButton* myPushButton; myPushButton->setStyleSheet("* { color: blue }"); 其实他和设置为:myPushButton->setStyleSheet("color: blue"); 效果相同,只是后一种设置不会对QPushButton的子类产生作用,但第一种却会。
四、继承性
与CSS不同的一点,在CSS box模型中,如果一个元素在别一元素的里面,那么里面的元素会自动继承外面元素的属性,但QSS里面不会,如: 一个QPushButton如果放在一个QGroupBox里面,如果:qApp->setStyleSheet("QGroupBox { color: red; } "); 并不代表在QGroupBox里面的QPushButton也会有color:red的属性,如果要想有的话要显示写明,如:qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }"); 或者在应用程序里面也可以用QWidget::setFont等来设置到子控件的属性。
五、Namespace冲突
类型选择器能够使用到一个特定的类型,如: class MyPushButton : public QPushButton { // ... } qApp->setStyleSheet("MyPushButton { background: yellow; }");
因为QSS使用QObject::className来判断要赋与style sheet的控件类型,如果一个用户定义控件类型在一个namespace里面的话,QObject::className会返回<namespace>::<classname> 的名字,这和子控件选择器的语法相冲突,为了解决此问题,使用“--”来代替“::”,比如: namespace ns { class MyPushButton : public QPushButton { // ... } } qApp->setSytleSheet("ns--MyPushButton { background: yellow; }");
六、设置对像属性 如果在程序里面使用Q_PROPERTY设置的属性,可以在qss里面使用:qproperty-<property name>的形式来访问并设置值。如: MyLabel { qproperty-pixmap: url(pixmap.png); } MyGroupBox { qproperty-titleColor: rgb(100, 200, 100); } QPushButton { qproperty-iconSize: 20px 20px; } 如果属性引用到的是一个由Q_ENUMS申明的enum 时,要引用其属性名字要用定义的名称而不是数字。
3.下面是一个蓝色主题的css文件例子
QWidget#frmLogin,QWidget#frmMessageBox,QWidget#Dialog3,QWidget#Dialog1{
border:1px solid #1B89CA;
border-radius:2px;
} .QFrame{
border:1px solid #5CACEE;
border-radius:5px;
} QWidget#widget_title{
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QLabel#lab_Ico,QLabel#lab_Title{
padding-left:3px; border-radius:0px;
color: #F0F0F0;
background-color:rgba(,,,);
border-style:none;
} QLineEdit {
border: 1px solid #5CACEE;
border-radius: 5px;
padding: 2px;
background: none;
selection-background-color: #1B89CA;
} QLineEdit[echoMode=""] {
lineedit-password-character: ;
} .QGroupBox{
border: 1px solid #5CACEE;
border-radius: 5px;
} .QPushButton{
border-style: none;
border: 0px;
color: #F0F0F0;
padding: 5px;
min-height: 20px;
border-radius:5px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} .QPushButton[focusPolicy=""] {
border-style: none;
border: 0px;
color: #F0F0F0;
padding: 0px;
min-height: 10px;
border-radius:3px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} .QPushButton:hover{
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} .QPushButton:pressed{
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QPushButton#btnMenu,QPushButton#btnMenu_Min,QPushButton#btnMenu_Max,QPushButton#btnMenu_Close{
border-radius:0px;
color: #F0F0F0;
background-color:rgba(,,,);
border-style:none;
} QPushButton#btnMenu:hover,QPushButton#btnMenu_Min:hover,QPushButton#btnMenu_Max:hover{
background-color: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: rgba(, , , ), stop: #5CACEE);
} QPushButton#btnMenu_Close:hover{
background-color: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: rgba(, , , ), stop: rgba(, , , ));
} QCheckBox {
spacing: 2px;
} QCheckBox::indicator {
width: 20px;
height: 20px;
} QCheckBox::indicator:unchecked {
image: url(:/image/checkbox_unchecked.png);
} QCheckBox::indicator:checked {
image: url(:/image/checkbox_checked.png);
} QRadioButton {
spacing: 2px;
} QRadioButton::indicator {
width: 15px;
height: 15px;
} QRadioButton::indicator::unchecked {
image: url(:/image/radio_normal.png);
} QRadioButton::indicator::checked {
image: url(:/image/radio_selected.png);
} QComboBox,QDateEdit{
border-radius: 3px;
padding: 1px 10px 1px 5px;
border: 1px solid #5CACEE;
} QComboBox::drop-down,QDateEdit::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left-color: #5CACEE;
} QComboBox::down-arrow,QDateEdit::down-arrow {
image: url(:/image/array_down.png);
} QMenu {
background-color:#F0F0F0;
margin: 2px;
} QMenu::item {
padding: 2px 12px 2px 12px;
} QMenu::indicator {
width: 13px;
height: 13px;
} QMenu::item:selected {
color: #FFFFFF;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QMenu::separator {
height: 1px;
background: #5CACEE;
} QProgressBar {
border-radius: 5px;
text-align: center;
border: 1px solid #5CACEE;
} QProgressBar::chunk {
width: 5px;
margin: .5px;
background-color: #1B89CA;
} QSlider::groove:horizontal,QSlider::add-page:horizontal {
background: #;
height: 8px;
border-radius: 3px;
} QSlider::sub-page:horizontal {
height: 8px;
border-radius: 3px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QSlider::handle:horizontal {
width: 13px;
margin-top: -3px;
margin-bottom: -3px;
border-radius: 6px;
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,stop:0.6 #F0F0F0, stop:0.778409 #5CACEE);
} QSlider::handle:horizontal:hover {
background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0,stop:0.778409 #1B89CA);
} QSlider::groove:vertical,QSlider::sub-page:vertical {
background:#;
width: 8px;
border-radius: 3px;
} QSlider::add-page:vertical {
width: 8px;
border-radius: 3px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QSlider::handle:vertical {
height: 14px;
margin-left: -3px;
margin-right: -3px;
border-radius: 6px;
background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0, stop:0.778409 #5CACEE);
} QSlider::handle:vertical:hover {
background: qradialgradient(spread: pad, cx: 0.5, cy: 0.5, radius: 0.5, fx: 0.5, fy: 0.5, stop: 0.6 #F0F0F0,stop:0.778409 #1B89CA);
} QScrollBar:vertical {
width:10px;
background-color:rgba(,,,%);
padding-top:10px;
padding-bottom:10px;
} QScrollBar:horizontal {
height:10px;
background-color:rgba(,,,%);
padding-left:10px; padding-right:10px;
} QScrollBar::handle:vertical {
width:10px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} QScrollBar::handle:horizontal {
height:10px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} QScrollBar::handle:vertical:hover {
width:10px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QScrollBar::handle:horizontal:hover {
height:10px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QScrollBar::add-line:vertical {
height:10px;
width:10px;
subcontrol-position: bottom;
subcontrol-origin: margin;
border-image:url(:/image/add-line_vertical.png);
} QScrollBar::add-line:horizontal {
height:10px;
width:10px;
subcontrol-position: right;
subcontrol-origin: margin;
border-image:url(:/image/add-line_horizontal.png);
} QScrollBar::sub-line:vertical {
height:10px;
width:10px;
subcontrol-position: top;
subcontrol-origin: margin;
border-image:url(:/image/sub-line_vertical.png);
} QScrollBar::sub-line:horizontal {
height:10px;
width:10px;
subcontrol-position: left;
subcontrol-origin: margin;
border-image:url(:/image/sub-line_horizontal.png);
} QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical {
width:10px;
background: #C0C0C0;
} QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
height:10px;
background: #C0C0C0;
} QScrollArea {
border: 0px ;
} QTreeView,QListView,QTableView{
border: 1px solid #5CACEE;
selection-background-color: #1B89CA;
selection-color: #F0F0F0;
} QTableView::item:selected, QListView::item:selected, QTreeView::item:selected {
color: #F0F0F0;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QTableView::item:hover, QListView::item:hover, QTreeView::item:hover {
color: #F0F0F0;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} QTableView::item, QListView::item, QTreeView::item {
padding: 5px;
margin: 0px;
} QHeaderView::section {
padding:3px;
margin:0px;
color:#F0F0F0;
border: 1px solid #F0F0F0;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} QTabBar::tab {
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
color: #F0F0F0;
min-width: 60px;
min-height: 20px;
padding: 3px 8px 3px 8px;
margin:1px;
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #5CACEE, stop: #4F94CD);
} QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(spread:pad, x1:, y1:, x2:, y2:, stop: #1B89CA, stop: #1077B5);
} QStatusBar::item {
border: 1px solid #5CACEE;
border-radius: 3px;
}
Qt qss 使用的更多相关文章
- Qt &QSS
Today task:解决了qt中的一些控件无法使用qss的问题(如QProgressDialog 调节chunk的颜色,QMessageBox按钮的颜色问题)1,对于QMessageBox,可以单独 ...
- QT qss资源文件与代码分离
在最近的Qt相关项目开发中,有不同客户提出更改logo图片的需求,每次更换一张图片需要重新添加到.qrc资源文件,并重新编译源代码生产可执行文件,操作效率极低,频繁修改源代码也 容易引起其他不可靠问题 ...
- QT qss 初级介绍
这篇文章来自于QT的帮助文档,你要是看了最新版的,会发现讲解得更棒.如果你的英文不是那么好,或者说看着头疼,那还是来看此篇吧. 在此之前说一个帮助文档的特别用法,绝不仅仅是搜单词,QT的文档非常强大的 ...
- QT (QSS) 编程, QSS语法概述。。setstylesheet
http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html 转载] QT皮肤(QSS)编程 借用css 的灵感, Qt也支持Qt自己的 ...
- Qt qss 动态属性-不同条件不同显示
一. 1.为了用户界面外观的动态变化,属性选择器可以与动态属性组合使用. 2.当一个属性值变化时,所引用的样式不会自动更新.相反地,必须手动触发更新才会生效.unpolish()用于清理之前的样式,而 ...
- QT:QSS ID选择器无效
我正在学习使用Qt样式表给我的应用程序添加不同的样式.我上网看了看Qt文档,上面说你可以使用一种ID选择器,它可以把主题应用到某些对象上.我就是这样实现这个特性的: QPushButton#butto ...
- QT:QSS完全无效的原因
QSS的文件格式不是UTF-8,导致读取到的文件中字符串出现乱码.
- qt QSS文件伪状态
表 1. 伪状态列表伪状态 描述:checked button部件被选中:disabled 部件被禁用:enabled 部件被启用:focus 部件获得焦点:hover ...
- Qt qss一些伪装态,以及margin与padding区别
伪状态 描述 :checked button部件被选中:disabled 部件被禁用:enabled 部件被启用:focus 部件获得焦点:hover 鼠标位于部件 ...
随机推荐
- nodejs 相关
1.错误 fs.js:543 return binding.rename(pathModule._makeLong(oldPath), 上传图片->图片改名->保存->在页面显示该图 ...
- C语言中的EOF和回车不一样
经常我们碰到这样一个C语言问题,例如: 输入一个组整数,按照从小到大排序后输出结果 输入: 1 7 9 2 4 输出: 1 2 4 7 9 这里要用C语言读入一段数的话,如果用 int array ...
- 利用百度语音API进行语音识别。
由于项目需要,这几天都在试图利用百度语音API进行语音识别.但是识别到的都是“啊,哦”什么的,我就哭了. 这里我只是分享一下这个过程,错误感觉出现在Post语音数据那一块,可能是转换问题吧. API请 ...
- 怎样给WordPress分配更多的内存
WordPress如果内存不够,你在操作的时候,就会碰到像这样的问题”Allowed memory size of xxxxxx bytes exhausted”(允许的内存 xxxx 字节已经用光了 ...
- WPF:依赖属性的应用
依赖属性与一般属性相比,提供了对资源引用.样式.动画.数据绑定.属性值继承.元数据重载以及WPF设计器的继承支持功能的支持. 下面的这个Demo来自<葵花宝典--WPF自学手册>. 1.M ...
- 分分钟教会大家第一个Spring入门案例
1.下载Spring jar包,并添加到项目中. 官网地址http:springsource.org 2.在项目中新建一个类 package cn.test; public class He ...
- bootstrap-carousel
功能:轮播插件carousel, 主要用于首页大图片的显示与左右按钮的点击滑动图片 插件:carouse.js 要点:class="carousel slide"里的data-sl ...
- eclipse emacs
eclipse emacs 插件 http://www.mulgasoft.com/emacsplus eclipse字体设置: 一.把字体设置为Courier New 操作步骤:打开Elcipse ...
- iOS开发——高级篇——Objective-C特性:Runtime
Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和转发.下面通过分析Apple开源的 ...
- android快速开发框架
网络: socket: mina http: http://loopj.com/android-async-http/ UI: http://jakewharton.github.io/butterk ...