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) }其标志是“::”。
css 属性选择器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、基类和派⽣类进⾏相同设置,以后出现的为准。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论