打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
浅谈样式表QSS的应用
userphoto

2013.11.06

关注
最近在用QT编程时界面的风格总是很难弄得统一,于是在查阅了一些书籍之后总结了一些经验,希望同大家分享,有不正确之处请大家多多指正。
首先,在QT中要使界面的风格统一,则不得不提到样式表(qss),其实qss是借鉴css的灵感, Qt也声援Qt自己的css, 简称qss。同css相仿,qss的首要性能与最终目标都是能使界面的体现与界面的元素分手,即质与形的分开,就好像自己可以在不同的时候穿上不同的衣服一样,css机制的引入,使得设计一种皮肤与界面控件分别的软件成为可能,利用过程也能像web界面那样随便地变换外表。
我们来看看QSS的语法:
一、模式化方式
同css一样,他也是由一个selector与一个declaration形成,selector指定了是对哪一个控件发生后果,而declaration才是真实的发生作用的语句。如:
QPushButton { background-color: red }
QPushButton指定了是对所有的QPushButton或是其子类控件(如用户定义的MyPushButton)发生波及,而background-color:red阐明所有的受波及控件的背景都为red。除非“类名”,“对象名”,“Qt属性名”这三样东西是大小写敏感的外其余的东西都是大小写不敏感的,如color与Color代表统一属性。万一有几个selector指定了相像的declaration, 能够运用逗号(,各种绽放准绳驱动着ATM技巧不停变动,)将各个抉择器分离,如:
QPushButton, QLineEdit, QComboBox { color: blue }
他相当于:
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类别有:
1.1 通用类型选择器:*
会对所有控件有结果。
1.2 类别选择器:QPushButton
匹配所有QPushButton的实例和其子类的实例。
1.3 属性选择器:QPushButton[flat=”false”]
匹配所有QPushButton属性flat为false的实例,属性分为两种,静态的和动态的,静态属性可以通过Q_PROPERTY() 来指定,动态属性可以使用setProperty来指定,如:
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
如果在设置了qss后Qt属性变动了,必要重新设置qss来使其见效,可以使用先unset再set qss。
1.4 类选择器:.QPushButton
所有QPushButton的实例,但不包括其子类,这相当于:
*[class~="QPushButton"]
~=的含义是测验一个QStringList类别的属性是否包罗给定的QString。
1.5 ID抉择器:QPushButton#okButton
对应Qt里面的object name设置,使用这条CSS之前要先设置对应控件的object name为okButton,如:
Ok->setObjectName(tr(“okButton”));
1.6 后代选择器:QDialog QPushButton
对于所有为QDialog后代(包括儿子,与儿子的儿子的递归)为QPushButton的实例
1.7 子选择器:QDialog > QPushButton
对于所有的QDialog直接子类QPushButton的实例,不包罗儿子的儿子的递归。
2, 子控件选择器
2.1 对于庞杂的控件,也许会在中间包括其余子控件,如一个QComboxBox中有一个drop-down的按钮。那么目前如果要设置QComboxBox的下拉按钮的话,就可以这么走访:
QComboBox::drop-down { image: url(dropdown.png) }
其标记是(::)
2.2 子控件选择器是用位置的引用来代表一个元素,这个元素可以是一个唯一控件或是另一个包罗子控件的复合控件。使用subcontrol-origin属性可以变换子控件的默许放置位置,如:
QComboBox {
margin-right: 10px;
}
QComboBox::drop-down {
subcontrol-origin: margin;
}
如上语句可以用来转变drop-down的margin。
2.3 相对位子属性可以用来变换子控件相对于起初位置的偏移量,如当一个QCombox的drop-down按钮被按下时,我们可以用一个内部的小偏移量来表示被按下的结果,如下:
QComboBox::down-arrow {
image: url(down_arrow.png);
}
QComboBox::down-arrow:pressed {
position: relative;
top: 1px; left: 1px;
}
2.4 绝对位子属性准许子控件转变自己的位子和大小而不受引用元素的控件。一但位置被设定了,这些子控件就可以被当做平常的widget来看待,并且可以应用合模型。关于合模型可以参考下面。
万一你要察看Qt扶持哪些子控件选择器,可以参看:
http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3, 伪挑选器(pseudo-states)
3.1 伪选择器以冒号(:)表示,与css里的伪选择器相仿,是基于控件的一些大致形势来限量过程的规定,如hover规矩表示鼠标通过控件时的形势,而press表示按下按钮时的形势。如:
QPushButton:hover {
Background-color:red;
}
表示鼠标通过时QPushButton背景变红。
3.2 Pseudo还扶持否认记号(!),如:
QRadioButton:!hover { color: red }
表示不曾鼠标移上QRadioButton时他揭示的色泽是red。
3.3. Pseudo可以被串连在同时,譬如:
QPushButton:hover:!pressed { color: blue; }
表示QPushButton在鼠标移上却不曾点击时显现blue字,但如果点击的时候就不会揭示blue色泽了。
3.4 同样可以和之前所讲的子控件挑选器同时结合应用,如:
QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }
3.5 与前面所讲的一样,伪挑选器,子控件选择器等都是能够用逗号(,)分隔表示延续相像的安设的,如:
QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下
3.6 更多请参看:
http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states
二、 处理矛盾
1 运用object name
1.1 在程序里面要先设置控件的,如:
btnOne = new QPushButton(centralWidget);
btnOne->setObjectName(QString::fromUtf8("btnOneCh"));
1.2 这么,我们有了一个object name为btnOneCh的QPushButton,尝试一下,使用指定object name的方法,如:
QPushButton#btnOneCh { color: red }
QPushButton { color: white }
可以看出,btnOncCh的color变成了red
2 运用伪抉择器,如hover,press,enabled等,雅言,如:
2.1 按扭“1”是disable了的,
QPushButton:!enabled {color: white}
3 所有的类型选择器都有一个共有的个性,即使如果有两个属性抵触了的话就会以最终展现的一个为准,如:
QPushButton { color: red }
QAbstractButton { color: gray }
由于QPushButton为QAbstractButton的子类,如果只设置QAbstractButton的可以想像成果是所有的QPushButton都为gray, 如果只设置QPushButton的所有QPushButton都会为red,当两个都能设置起效的
时候,以在文本上最终展现的为准,因而结局为Grey
4 当然中间假使有#指定了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。
三、 级联效应
1 子类可以传承父类的StyleSheet,然而如果子类里面设置了StyleSheet与父类里在设置的有抵触,那么当然会优先斟酌子类自己的,同样,如果在qApp时面设置了,然而在某一个特定控件里面也设置
,如果有矛盾,也是优先控件自己的,譬如,我在程序时面设置了:
btnOneEn->setStyleSheet("QPushButton { color: red }");
而,当我再设置qApp时,如果,typedef的四种用法和两种陷阱,将QPushButton的color设置成grey的,那么结局是对于btnOneEn这个QPushButton来说他的色泽还是red。
这即使为什么此地设置为grey了btnOneEn却还是red的。
2 如果我们对一个控件设置StyleSheet为:
QPushButton* myPushButton;
myPushButton->setStyleSheet("* { color: blue }");
其实他和设置为:
myPushButton->setStyleSheet("color: blue");
结果相像,只是后一种安设不会对QPushButton的子类发生作用,但第一种却会。
四、 传承性
1 与CSS不同的一点,在CSS box模型中,如果一个元素在别一元素的里面,那么里面的元素会主动传承外边元素的属性,但QSS里面不会,如:
一个QPushButton万一放在一个QGroupBox里边,假使:
qApp->setStyleSheet("QGroupBox { color: red; } ");
并不代表在QGroupBox里边的QPushButton也会有color:red的属性,假使要想有的话要显现写明,如:
qApp->setStyleSheet("QGroupBox, QGroupBox * { color: red; }");
或许在利用过程里边也可以用QWidget::setFont等来设置到子控件的属性。
五、 Namespace矛盾
1 类型选择器可以使用到一个特定的类型,如:
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; }");
说了这么多还不如列几个例子一看就知道了。
六、例行攻略
在这里首先建立一txt文档,将其后缀名改为.qss 如:dev.qss。
然后将内容写入;
QFrame {
background-color: rgb(200, 200, 200);
}
QPushButton{
border: 2px;
border-style: soild;
border-color: rgb(100, 100, 100);
background-color:qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(112, 112, 112, 255), stop:1 rgba(255, 255, 255, 255));
border-radius: 5;
padding: 5px;
}
QPushButton:hover {
background-color: rgb(255, 255, 127, 255);
border-color: rgb(134, 146, 255);
}
QLineEdit {
border-style: flat;
border-color: rgb(100, 100, 100);
background-color:white;
border-radius: 5;
padding: 5px;
}
QPushButton:pressed {
padding-left: 5px;
padding-top: 5px;
background-color: rgb(233, 237, 255,255);
}
如果那个控件的属性还不熟悉,你可以用QT Creator拖出那个控件查看其属性。
这个qss文件放在你的要用的工程目录下,然后加载到项目中;当然也可以加载到资源文件xx.qrc中。然后再实现文件中写入:
QFile qss(":/qss/dev.qss");
qss.open(QFile::ReadOnly);
qApp->setStyleSheet(qss.readAll());
qss.close();
QString qss;
QFile qssFile(":/qss/css.qss");
qssFile.open(QFile::ReadOnly);
if(qssFile.isOpen())
{
qss =QLatin1String(qssFile.readAll());
qApp->setStyleSheet(qss);
qssFile.close();
}
(我将它放到工程目录下的qss文件夹中然后加载到xx.qrc中的)
另外一种加载方法如下:
QFile qss(path);
qss.open(QFile::ReadOnly);
qApp->setStyleSheet(qss.readAll());
qss.close();
当然我还是推荐前一种方法。
虽然说了这么多其实用到的东西不是很多,到现在我对qss也不是非常明了,希望大家共同进步。谨记矛盾处理,样式表设置只是通用的设置,当不同的规则应用到相同的属性时,样式表就产生了
冲突。在这中情况下,特定的规则比通用的规则优先;伪状态比没有伪状态的优先;如果级别相同,则最后一个优先。其冲突解决按照CSS2规范进行。
原文:http://www.woxihuan.com/173073182/1345798206120184.shtml
Qt之QSS文件
通过文件定义qss
1  将QSS代码写入.qss文件中;(calendar.qss)
2  在qrc中加入该.qss文件;
3  在代码中进行读取使用
QFile file(":/calendar.qss");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
qApp->setStyleSheet(styleSheet);
file.close();
通过代码直接设置qss
QPushButton* myPushButton;
myPushButton->setStyleSheet("* { color: blue }");
myPushButton->setStyleSheet("color: blue");
参考:http://www.meego.com/thread-607-1-1.html  QSS编程语法
虽然Qt现在还不是特别完善,但它的跨平台性,界面重用性,已经表现出比mfc更强的、更好的性能,昨天写了qss样式表demo,但是在书上对样式表的使用,并不详细,初学者可能会遇到一些问题,今天对照官方代码,终于调通,简单记录如下:
1、建立文本文件,写入样式表内容,更改文件后缀名为qss;
2、在工程中新建资源文件*.qrc,将qss文件加入资源文件qrc中,此处注意prefix最好为"/",否则在调用qss文件时会找不到文件;
3、通过传入路径/文件名的方式创建一个QFile对象,以readonly的方式打开,然后readAll,最后qApp->setStyleSheet就可以使qss生效。
样式表的方式可以很方便的完成简单的贴图工作,而且效果也不错,简化了我以前在mfc上为了贴图,不得不重写控件类个工作,也使得美工可以很方便的修改生成的程序的颜色。
当今年4月初的时候,NOKIA收购了Qt,并推出了Qt4.2,当时并没有太注意,而当mfc开发的界面不能满足我的时候,我才去研究这个新的技术。
Qt很爽,因为是C++语言,所以看起来很快,预计在明年一月底,我就可以完全掌握,而且也因为是C++代码级跨平台,所以也获得了很高的执行效率。而它生成控件的方式则比mfc上的资源文件好得多,mfc中的窗体资源全部在一个.src文件中,不利于重用,而Qt中每个窗体拥有自己的资源文件,并且和窗体类是分开的,方便了重用。从此,我不在被局限于windows平台。
我会研究一下如何在应用程序中完成widget部件的使用,因为那种透明、随意拖拽的自定义部件必将是下一代UI主流。
QApplication app(...);
QFile qss("stylesheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();
#Qt
原文:http://blog.csdn.net/yongan1006/article/details/7433975
qt样式qss应用
这里简单的一个应用QListView的样式。
首先建立一个文本文档,改名为xx.qss  。
qss内容为:
QListView::item:selected {
border: 1px solid #6a6ea9;
}
QListView::item:selected:!active {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #ABAFE5, stop: 1 #8588B2);
}
QListView::item:selected:active {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #6a6ea9, stop: 1 #888dd9);
}
然后本人习惯把所有的资源都加进 到 xx.qrc   中去,
然后在mainWindow.cpp中加入如下语句:
因为我是加入到qrc文件中,所以路径前面要加一个:
QFile qss(":css.qss");
qss.open(QFile::ReadOnly);  qApp->setStyleSheet(qss.readAll()); qss.close();这样样式表就能很好的使用了。
#Pyqt
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
[转载] QT皮肤(QSS)编程
QT样式表
QSS总结以及最近做的Qt项目
QSS-pyqt样式表
Qt 样式表之QSS
QSS知识总结
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服