abcdlcq的个人主页

http://www.qtcn.org/bbs/u/118073  [收藏] [复制]

abcdlcq

  • 13

    关注

  • 15

    粉丝

  • 38

    访客

  • 等级:新手上路
  • 总积分:83
  • 男,1984-01-01

最后登录:2017-09-29

更多资料

日志

浅谈样式表QSS的应用

2012-05-17 09:07
    最近在用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扶持哪些子控件选择器,可以参看:
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 更多请参看:
二、 处理矛盾
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,或是
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();
(我将它放到工程目录下的qss文件夹中然后加载到xx.qrc中的)
另外一种加载方法如下:
QFile qss(path);
qss.open(QFile::ReadOnly);
qApp->setStyleSheet(qss.readAll());
qss.close();
当然我还是推荐前一种方法。
虽然说了这么多其实用到的东西不是很多,到现在我对qss也不是非常明了,希望大家共同进步。谨记矛盾处理,样式表设置只是通用的设置,当不同的规则应用到相同的属性时,样式表就产生了
冲突。在这中情况下,特定的规则比通用的规则优先;伪状态比没有伪状态的优先;如果级别相同,则最后一个优先。其冲突解决按照CSS2规范进行。
分类:默认分类|回复:0|浏览:968|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:05-06 13:34
©2005-2016 QTCN开发网 版权所有 Gzip disabled