Qt的皮肤设计（Style Sheet）

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

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

 

1、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);

 

2、qss语法

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

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

一、 通常选择器（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的实例，不包含儿子的儿子的递归。

二、子控件选择器

• 对于复杂的控件，可能会在其中包含其余子控件，如一个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
三、伪选择器（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