ZT:使用Qt Style Sheet(1)

转自：http://hi.baidu.com/buptyoyo/blog/item/1ef4fd00d6e026054bfb5104.html

借用css 的灵感， Qt也支持Qt自己的css, 简称qss。同css 相似，qss的主要功能与最目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。

 

1， 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类型有：

                                    i.              通用类型选择器：*

会对所有控件有效果。

 

                                  ii.              类型选择器：QPushButton

匹配所有QPushButton的实例和其子类的实例。

 

                                iii.              属性选择器：QPushButton[flat=”false”]

匹配所有QPushButton属性flat为false的实例，属性分为两种，静态的和动态的，静态属性可以通过Q_PROPERTY() 来指定，来动态属性可以使用setProperty来指定，如：

QLineEdit *nameEdit = new QLineEdit(this);

nameEdit->setProperty("mandatoryField", true);

如果在设置了qss后Qt属性改变了，需要重新设置qss来使其生效，可以使用先unset再set qss。

 

                                 iv.              类选择器：.QPushButton

匹配所有QPushButton的实例，但不包含其子类，这相当于：

*[class~="QPushButton"]

               ~=的意思是测试一个QStringList类型的属性是否包含给定的QString。

             

                                   v.              ID选择器：QPushButton#okButton

对应Qt里面的object name设置，使用这条CSS之前要先设置对应控件的object name为okButton，如：

        Ok->setObjectName(tr(“okButton”));

 

                                 vi.              后裔选择器：QDialog QPushButton

匹配所有为QDialog后裔（包含儿子，与儿子的儿子的递归）为QPushButton的实例

 

                               vii.              子选择器：QDialog > QPushButton

匹配所有的QDialog直接子类QPushButton的实例，不包含儿子的儿子的递归。

 

2， 子控件选择器

                                    i.              对于复杂的控件，可能会在其中包含其他子控件，如一个QComboxBox中有一个drop-down的按钮。那么现在如果要设置QComboxBox的下拉按钮的话，就可以这样访问：

                   QComboBox::drop-down { image: url(dropdown.png) }

其标志是（::）

                                  ii.              子控件选择器是用位置的引用来代表一个元素，这个元素可以是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin属性可以改变子控件的默认放置位置，如：

QComboBox {

     margin-right: 20px;

 }

 QComboBox::drop-down {

     subcontrol-origin: margin;

 }

如上语句可以用来改变drop-down的margin。

                                iii.              相对位置属性可以用来改变子控件相对于最初位置的偏移量，如当一个QCombox的drop-down按钮被按下时，我们可以用一个内部的小偏移量来表示被按下的效果，如下：

QComboBox::down-arrow {

     image: url(down_arrow.png);

}

QComboBox::down-arrow:pressed {

     position: relative;

     top: 1px; left: 1px;

}

                                 iv.              绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了，这些子控件就可以被当成一般的widget来对待，并且可以使用合模型。关于合模型可以参考下面。

如果你要查看Qt支持哪些子控件选择器，可以参考：

http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls

 

-syntax.html

3， 伪选择器（pseudo-states）

                                    i.              伪选择器以冒号（:）表示，与css里的伪选择器相似，是基于控件的一些基本状态来限定程序的规则，如hover规则表示鼠标经过控件时的状态，而press表示按下按钮时的状态。如：

QPushButton:hover {

       Background-color:red;

}

                            表示鼠标经过时QPushButton背景变红。

                                  ii.              Pseudo还支持否定符号（！），如：

                 QRadioButton:!hover { color: red }

表示没有鼠标移上QRadioButton时他显示的颜色是red。

                                iii.              Pseudo可以被串连在一起，比如：

                 QPushButton:hover:!pressed { color: blue; }

表示QPushButton在鼠标移上却没有点击时显示blue字，但如果点击的时候就不会显示blue颜色了。

                                 iv.              同样可以和之前所讲的子控件选择器一起联合使用，如：

QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }

 

                                   v.              与前面所讲的一样，伪选择器，子控件选择器等都是可以用逗号（，）分隔表示连续相同的设置的，如：

QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下

 

 

                           

                                 vi.              更多请参考：

http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states