Qt样式表QSS基本使用

    Qt具有一种名为样式表的文件qss,主要结构与css相似,用于将界面与样式风格相互分离,形成同web相同的可以随意换肤的效果。

一、QSS语法

    和css 一样,他也有由一个选择器和具体的样式描述组成,选择器指定了是对象,样式描述指定了具体的样式风格。如:

    QPushButton { color: red }指QPushButton对象的前景色为红色。

    选择器主要包括“类名”,“对象名”,“Qt 属性名”,这三样东西是大小写敏感的,而样式描述是大小写不敏感的,如color 与Color 代表同一属性。

    如果有几个选择器指定了相同的样式描述, 可以使用逗号“,”将各个选择器分开,如:QPushButton, QLineEdit, QComboBox { color: red }。

二、选择器的主要分类

    1、一般选择器

    Qt 支持所有的CSS3定义的选择器,其祥细内容可以在w3c 的网站上查找,其中比较常用的选择器类型有:

    1)通用类型选择器:*会对所有控件有效果。

    2)类型选择器:QPushButton 匹配所有QPushButton 的实例和其子类的实例。

    3)属性选择器:QPushButton[flat=”false”]匹配所有QPushButton 属性flat 为false 的实例,属性分为两种,静态的和动态的,静态属性可以通过Q_PROPERTY() 来指定,动态属性可以使用setProperty 来指定,如:

    QLineEdit *lineEdit = new QLineEdit(this);
    lineEdit ->setProperty("test", true);

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

    4)类选择器:.QPushButton

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

    *[class~="QPushButton"]

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

    5)ID 选择器:QPushButton#okButton

    对应Qt 里面的objectname 设置,使用这条CSS 之前要先设置对应控件的objectname 为okButton,如:Ok->setObjectName(tr(“okButton”));

    6)后裔选择器:QDialog QPushButton

    匹配所有为QDialog 后裔(包含儿子,与儿子的儿子的递归)为QPushButton 的实例。

    7)子选择器:QDialog > QPushButton

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

2、子控件选择器

    1)对于复杂的控件,可能会在其中包含其他子控件,如一个QComboxBox 中有一个drop-down 的按钮。那么现在如果要设置QComboxBox 的下拉按钮的话,就可以这样访问:QComboBox::drop-down { image: url(dropdown.png) }其标志是“::”。

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

QComboBox {margin-right: 20px;}
QComboBox::drop-down {subcontrol-origin: margin;}

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

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

QComboBox::down-arrow {image: url(downarrow.png);}
QComboBox::down-arrow:pressed {position: relative;top: 1px; left: 1px;}

    4)绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了,这些子控件就可以被当成一般的widget 来对待,并且可以使用盒模型。

3、伪选择器

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

QPushButton:hover {Background-color:red;}

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

    2)伪选择器支持否定符号(!),如:

QRadioButton:!hover { color: red }

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

    3)伪选择器可以被串连在一起,比如:

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

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

    4)同样可以和之前所讲的子控件选择器一起联合使用,如:

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

    5)伪选择器,子控件选择器等都是可以用逗号“,”分隔表示连续相同的设置的,如:

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

三、常见问题

    1、越精确的选择器越具有更强的效力。

    2、基类和派生类进行相同设置,以后出现的为准。

展开阅读全文

没有更多推荐了,返回首页