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. HierarchyView的实现原理和Android设备无法使用HierarchyView的解决方法

    声明:由于本人一直用eng版的真机调试,所以此方法没有用过,记录在这里,有机会验证 ---------------------------------------------------------- ...

  2. Django 入门

    Django 入门 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模型,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容 ...

  3. ASP.NET MVC轻教程 Step By Step 8——路由

    在前面的教程里,细心的你可能会有个疑问,就是地址栏输入/Home/Write就可以进入留言页面.无论是静态HTML还是ASP/ASP.NET.PHP,URL都是和某个页面相关.比如假设有个URL是“w ...

  4. 控制反转(IoC)与依赖注入(DI)

    1.控制反转(Inversion of Control)与依赖注入(Dependency Injection) 控制反转即IoC (Inversion of Control),它把传统上由程序代码直接 ...

  5. base64的一个应用情景

    AddActivity.xml rushrank.xml 不过AddActivity.xml不也是通过二进制流就传过去了吗?      事实上是可以的,只要不将这些二进制的数据写下来,传播是可以的,只 ...

  6. bzoj 2631: tree 动态树+常数优化

    2631: tree Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 1716  Solved: 576[Submit][Status] Descrip ...

  7. 如何用 React Native 创建一个iOS APP?

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  8. 关于用xercesImpl包解析xml文件遇中文报错问题

    今天在运行项目时报错: Caused by: org.apache.xerces.impl.io.MalformedByteSequenceException: 3 字节 UTF-8 序列的字节 3 ...

  9. Apache OFBiz

    Apache OFBiz® Apache OFBiz offers a great deal of functionality, including: advanced e-commerce cata ...

  10. [LeetCode#187]Repeated DNA Sequences

    Problem: All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: ...