Qt的皮肤设计（Style Sheet）

原地址：http://blog.csdn.net/lastsoup/article/details/7043124

Qt的皮肤设计，也可以说是对Qt应用程序的界面美化，Qt使用了一种类CSS的样式规则QSS。

 

一、Style Sheet的应用

1.直接在程序代码中设置样式，利用setStyleSheet()方法

widget->setStyleSheet("color:red");     //widget内字体颜色为红色

widget->->setStyleSheet(QPushButton{color:red} QPushButton:hove{color:yellow}); 

 //widget内的QPushButton对象字体颜色为红色，当鼠标悬浮时为黄色

 

2.使用qss文件

步骤：

创建qss文档，例：stylesheet.qss

根据qss语法，写自定义的内容（详见qss语法）

引入qss文件，使界面效果生效

QFile file("skin/clean.qss");//路径为应用程序所在目录开始

file.open(QFile::ReadOnly);

QTextStream filetext(&file);

QString stylesheet= filetext.readAll();

this->setStyleSheet(stylesheet);

 

二、qss语法

qss和css一样有两部分组成，选择器和语句声明（selector和declaration）

选择器分为一般选择器、子控件选择器(辅助控制器)和伪选择器（伪状态）（下面为转载，出处http://www.cnblogs.com/davesla/archive/2011/01/30/1947928.html）

1、 一般选择器（selector）

Qt支持所有的CSS2定义的选择器，其祥细内容可以在w3c的网站上查找http://www.w3.org/TR/CSS2/selector.html ， 其中比较常用的selector类型有：

• 通用类型选择器：* 会对所有控件有效果。
• 类型选择器：QPushButton匹配所有QPushButton的实例和其子类的实例。
• 属性选择器：QPushButton[flat=”false”]匹配所有QPushButton属性flat为false的实例，属性分为两种，静态的和动态的，静态属性可以通过Q_PROPERTY() 来指定，来动态属性可以使用setProperty来指定，如：
  QLineEdit *nameEdit = new QLineEdit(this);
  nameEdit->setProperty("mandatoryField", true);
  如果在设置了qss后Qt属性改变了，需要重新设置qss来使其生效，可以使用先unset再setqss。
• 类选择器：.QPushButton匹配所有QPushButton的实例，但不包含其子类，这相当于：*[class~="QPushButton"]     ~=的意思是测试一个QStringList类型的属性是否包含给定的QString
• ID选择器：QPushButton#okButton对应Qt里面的object name设置，使用这条CSS之前要先设置对应控件的object name为okButton，如：Ok->setObjectName(tr(“okButton”));
• 后裔选择器：QDialog QPushButton匹配所有为QDialog后裔（包含儿子，与儿子的儿子的递归）为QPushButton的实例
• 子选择器：QDialog > QPushButton匹配所有的QDialog直接子类QPushButton的实例，不包含儿子的儿子的递归。

2、子控件选择器

• 对于复杂的控件，可能会在其中包含其他子控件，如一个QComboxBox中有一个drop-down的按钮。那么现在如果要设置QComboxBox的下拉按钮的话，就可以这样访问：
  QComboBox::drop-down { image: url(dropdown.png) }其标志是（::）
• 子控件选择器是用位置的引用来代表一个元素，这个元素可以是一个单一控件或是另一个包含子控件的复合控件。使用subcontrol-origin属性可以改变子控件的默认放置位置，如：
  QComboBox {
         margin-right: 20px;
  }
  QComboBox::drop-down {
         subcontrol-origin: margin;
  }
  
  如上语句可以用来改变drop-down的margin。
• 相对位置属性可以用来改变子控件相对于最初位置的偏移量，如当一个QCombox的drop-down按钮被按下时，我们可以用一个内部的小偏移量来表示被按下的效果，如下：
  QComboBox::down-arrow {
         image: url(down_arrow.png);
  }
  QComboBox::down-arrow:pressed {
         position: relative;
         top: 1px; left: 1px;
  }
• 绝对位置属性允许子控件改变自己的位置和大小而不受引用元素的控件。一但位置被设定了，这些子控件就可以被当成一般的widget来对待，并且可以使用合模型。关于合模型可以参考下面。

如果你要查看Qt支持哪些子控件选择器，可以参考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-sub-controls-syntax.html
3、伪选择器（pseudo-states）

• 伪选择器以冒号（:）表示，与css里的伪选择器相似，是基于控件的一些基本状态来限定程序的规则，如hover规则表示鼠标经过控件时的状态，而press表示按下按钮时的状态。如：
  QPushButton:hover {
         Background-color:red;
  }
  表示鼠标经过时QPushButton背景变红。
• Pseudo还支持否定符号(!)，如：
  QRadioButton:!hover { color: red }
  表示没有鼠标移上QRadioButton时他显示的颜色是red。
• Pseudo可以被串连在一起，比如：
  QPushButton:hover:!pressed { color: blue; }
  表示QPushButton在鼠标移上却没有点击时显示blue字，但如果点击的时候就不会显示blue颜色了。
• 同样可以和之前所讲的子控件选择器一起联合使用，如：
  QSpinBox::down-button:hover { image: url(btn-combobox-press.bmp) }
• 与前面所讲的一样，伪选择器，子控件选择器等都是可以用逗号(,)分隔表示连续相同的设置的，如：
  QPushButton:hover,QSpinBox::down-button, QCheckBox:checked { color: white ;image: url(btn-combobox-press.bmp);} 表示如下
• 更多请参考：http://pepper.troll.no/s60prereleases/doc/stylesheet-reference.html#list-of-pseudo-states

常用的语句声明

基本用法

QPushButton { color: red }

多个共享属性(  ,  )

 QPushButton, QLineEdit, QComboBox { color: red }

设置多个属性（  ; ）

QPushButton { color: red; background-color: white }

 

常用的属性

color:red //字体颜色为红色

background:yellow //背景颜色为黄色

background-color:yellow //使用rgb(255,0,0)  rgba（255，0，0，50%）最后为透明度 #ffffff颜色RGB值

background-image:url(images/top.jpg);//背景不随窗口伸缩

border:1px solid gray //边框为1px并填充实心灰色 （groove凹槽）

border-top  boder-botom……

boder-color

border-radius:10px //边框圆角半径为10px

border-top-left-radius

border-top-rightt-radius

……

border-image:url(images/top.jpg);//背景图片随窗口变化

padding：2px 4px //设置内边框属性上内边距2px，右内边距为4px，下为0，左为0可不写（上右下左）

##设置背景颜色渐变

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #C7F8FA); /*背景颜色：颜色渐变(x1右,y1下,x2左,y2上,stop渐变点(0-1):颜色) ，y2:1颜色从上向下渐变*/
详细参考http://doc.qt.nokia.com/latest/stylesheet-reference.html的List of Properties

 

 

以上所有可查看Qt的在线帮助手册http://doc.qt.nokia.com/latest/stylesheet.html