Qt的皮肤设计(Style Sheet)

转载 2012年03月31日 12:02:21

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

常用的语句声明

基本用法

多个共享属性(  ,  )

设置多个属性(  ; )

 

常用的属性

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

来自:http://blog.csdn.net/caihuisinx/article/details/7291381

相关文章推荐

Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())

在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等。       但是各种方法都有其注意事项,如果不...

Qt 样式表 setStyleSheet

在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等。  setStyleSheet() ...

setStyleSheet设置相关

setStyleSheet("background:blue");背景

QObject派生类作为Qt 插件的Interface

Qt例子中,插件接口用的是普通的C++类(非QObject派生类),那么能否使用QObject派生类作为插件接口呢。在尝试之前,先google一下,找到到Qt邮件列表中的两个thread,只有一个回复...

setStyleSheet来设置图形界面的外观

来自:http://www.360doc.com/content/11/1122/10/7899729_166398154.shtml 使用setStyleSheet来设置图形界面的外观: Q...

QT学习之路————QT窗体去掉标题栏后不能移动的问题

QT程序去掉标题栏后我又哭了,因为它不能移动了,这就有点操蛋了,于是我就百度了一下,参照了别人的做法,最后实现了无标题栏窗口的移动,顺便记录下来。具体方法如下: (1)在头文件中添加如下代码: #in...

Qt中使用setStyleSheet对按钮进行外观设置

字体颜色的设置一般时以下两种方案: (1)属于QWidget子类的一些控件 可以直接使用样式表,例如label->setStyleSheet("color:white"); (2)不属于QWid...

Qt 之 自定义按钮 在鼠标 悬浮、按下、松开后的效果

一、简述在上一篇 Qt 之 去除窗口部件被选中后的焦点虚线框 中,我们为了去除焦点虚线框,给按钮的样式加上了如下的样式。QPushButton { background:red; bo...

setStyleSheet来设定窗口部件的样式

使用setStyleSheet来设置图形界面的外观:QT Style Sheets是一个很有利的工具,允许定制窗口的外观,此外还可以用子类QStyle来完成,他的语法很大比重来源于html的CSS,但...

setstylesheet的使用

setStyleSheet 2011-07-25 14:23 QApplication::setStyleSheet(QString); QWidget::setSt...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)