使用Qt Style Sheet(1)

借用 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