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 {
          
    }
    表示鼠标经过时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

Qt的皮肤设计(Style Sheet)的更多相关文章

  1. Qt控件样式 Style Sheet Demo

    迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...

  2. Qt 外观之一 ——Qt Style Sheet

    Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...

  3. Qt Style Sheet实践(一):按钮及关联菜单

    导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...

  4. Qt Style Sheet实践(一):按钮及关联菜单(24K纯开源,一共四篇)

    导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...

  5. Qt---自定义界面之 Style Sheet

    这次讲Qt Style Sheet(QSS),QSS是一种与CSS类似的语言,实际上这两者几乎完全一样.既然谈到CSS我们就有必要说一下盒模型. 1. 盒模型(The Box Model) 在样式中, ...

  6. CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  7. CSS(Cascading Style Sheet)简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  8. No style sheet with given id found错误

    在chrome中打开html页面,报错No style sheet with given id found,解决方如下

  9. 00Cascading Style Sheet

    Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...

随机推荐

  1. 使用awstats统计分析tengine日志访问量及各种http网站数据

    下载awstats最新安装包并解压 cd /usr/local/src wget http://www.awstats.org/files/awstats-7.3.tar.gz tar -zxvf a ...

  2. 局部视图(partial)

    局部视图(partial) 原文:Partial Views作者:Steve Smith翻译:张海龙(jiechen).刘怡(AlexLEWIS)校对:许登洋(Seay).何镇汐.魏美娟(初见) AS ...

  3. 小记,取GB2312汉字的首字母【转】

    /// <summary> /// PY 的摘要说明. /// </summary> public class PY { // Fields private string m_ ...

  4. JSP内置对象(上)

    在JSP中为了简化页面的开发提供了一些内置的对象.这些对象不需要由JSP的编写者通过new关键字实例化,他们都由容器实现和管理,在所有的JSP页面中都可以使用内置对象. JSP中共有9大内置对象: o ...

  5. DBA - 我的学习

    DBA - 我的学习 1. df -k 检查oracle 分区硬盘使用情况 2. 检查alert_<SID名称>.log, alert日志文件,检查是否新增错误日志 3. 检查数据文件的状 ...

  6. In machine learning, is more data always better than better algorithms?

    In machine learning, is more data always better than better algorithms? No. There are times when mor ...

  7. mysql视图的作用(详细)

    测试表:user有id,name,age,sex字段 测试表:goods有id,name,price字段 测试表:ug有id,userid,goodsid字段 视图的作用实在是太强大了,以下是我体验过 ...

  8. 【HDOJ】1688 Sightseeing

    Dijkstra求解次短路径,使用cnt和dis数组记录最小.次小的个数和长度.重写更新操作. /* 1688 */ #include <iostream> #include <st ...

  9. CSS3 :nth-of-type() 选择器

    可以设定第几个元素的样式 案例 css .qrcode img { margin-top: 30px; } .qrcode p:nth-of-type(1) { /*第一个p*/ font-size: ...

  10. 【转】windows常用消息大全(系统消息、通告消息、用户消息)

    原文网址:http://blog.csdn.net/nupt123456789/article/details/7370562 附录A Windows 常用消息大全 表A-1  Windows消息分布 ...