Qt样式表

Qt样式表的思想很大程度上是来自原HTML的层叠式样式表(CSS),通过调用Qwdiget::setStyleSheet()或是Qapplication::setStyleSheet(),可以为一个独立的子部件、整个窗口、甚至是整个应用程序指定一个样式表

样式表语法基础

一个样式表由一系列的样式规则构成,每个样式规则都有着下面的形式:

selector{attribute:value}

  1. 选择器(selector)部分通常是一个类名(如QComboBox),当然也要还有其的语法形式。
  2. 属性(attribute)部分是一个样式表属性的名字,值(value)部分是赋给该属性的值

为了使用方便,还可以使用一种简化形式:

selector,selector,…..,selectorM{

attribute:value1;

attribute:value2;

attribute:value3;

……

attribute:valueN;

}

这种简化形式可以同时为与M个选择器相匹配的部件设置N种属性。例如:

QcheckBox,QcomboBox,QspinBox{

color:red;

background-color:white;

font:bold;

}

这个规则设置了所有的QcheckBox,QcomboBox,QspinBox的前景色、背景色和字体。

方箱模型

在样式表中,每一个部件都被看作是一个由四个同心相似的矩形组成的箱体:

空白(margin)

空白区域位于边框外,并且总是透明的。

边框(border)

边框为部件提供了四周框架,其border-style属性可以设置为一些内置的框架风格,如:inset、outset、solid和ridge.

填充(padding)

填充在边框和内容区域之间提供了空白间隙。

内容(content)

内容区域位于最内部。如:一般的字体

注意:对于一个平面部件,例如一个空白、边框和填充都是0像素的部件而言,这四个矩形是完全重合的。

前景和背景

使用方式:

部件的前景色用于绘制上面的文本,可以通过color属性指定。

背景色用于绘制部件的填充矩形,可以通过background-color属性指定。

背景图片使用background-image属性定义,它用于绘制由background-origin指定的矩形区域(空包、边框、填充或内容)。

背景图片的矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。

如果指定的背景图具有alpha通道(即有半透明效果),通过background-color指定的颜色将会透过透明区域。这一功能使背景图片再多种环境下重复利用。

例子:

Qframe{

Margin:10px;                //px代表像素

Border:2px  solid  green

Padding :20px;

background-color:gray;

background-image:url(qt.png);           //路径’

background-position:top  right;          //右上角

background-origin:content;

background-repeat:none;

在这个例子中,Qframe四周的空白、边框和填充值都是一样。实际上margin属性可以在上下左右四个方向分别指定我们需要的不通知,例如:

Qframe{

Margin:14px 18px     20px     18px;

}

同时,我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left属性。

Qframe{

margin-top:14px;

margin-right:18px;

margin-bottom:20px;

margin-left:18px;

}

虽然目前本人仅仅使用了Qframe作为例子,但是我们也可以同样地将这些属性应用于任何一个支持方箱模型的QT部件,例如:QCheckBox、QLabel、QLineEdit、QListView、QMenu、QPushBotton、QTextEidt、QTooltip;

创建可缩放样式

在默认情况下,通过background-image指定的背景图片会自动重复平铺,以覆盖部件的整个填充矩形(即边框里面的那个区域)。如果我们想创建能够随着部件大小自动缩放而不是平铺的背景,需要设置一种称之为“边框图片”的东东。

“边框图片”可以通过background-image属性指定,它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分(九宫格).

当一个部件的边框被填充时,四角的格子通常不会发生变化,而其余的五个格子则可能被拉伸或平铺以填充可用空间。

当指定一个“边框图片”时,除了图片本身,还必须指定个用来分割九宫格的四条分割线,同时还必须指定非边角的格子是应该平铺还是拉伸,以及边框的宽度(用来确定边角格子的大小,防止边角被缩松而变形)。

例如,下面样式表定义button:

QpushButton{

border-width:4px;

border-image:url(button.png)        4  4  4  4  streth  streth;

}

解析:

border-image:url(button.png)        4  4  4  4  streth  streth。加载一张截取的图片。4  4  4  4分别代表四边的像素。然后拉伸。

类似上图,原本是红色框大小,但显示出来的只有黑色框大小。

控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小的大小。这两个值将影响部件的minimumSizeHint(),并在布局时被考虑。

例如:

QPushButton{

min-width:68px;

min-height:28px;

}

但是不使用,因为可以UI设计器中的属性区域直接修改。

处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义,这在样式表中被称为“伪状态”,例如,如果想在一个pushbutton在被按下的时候具有sunken的外观,可以指定一个叫做:pressed的状态。

使用方式:

QPushButton{

border:2px  outset  green;

background:gray;

}

QPushButton:pressed{

Border-style:inset;

}

此外,下面是可用的为状态列表:

伪状态                   描述

:checked                button部件被选中

:unchecked             button部件未被选中

:disabled                部件被禁用

:enabled                 部件被启用

:focus                    部件获取焦点

:hover                   鼠标位于部件上

:indeterminate               checkbox或radiobutton被部件选中

:off                  部件可以切换,且处于offTimer状态

:on                  部件可以切换,且处于on状态

:pressed                 部件被鼠标按下

使用子部件定义微观样式

许多部件都包含有子元素,这些元素可以称为“子部件” ,例如:SpinBox的上下箭头。

子部件可以通过::来指定,例如QdateTimerEdit::up-button。定义子部件的样式与定义部件非常相似,他们遵循前面提到的方箱模型(即他们可以拥有自己的边框、背景等),并且也可以和伪状态联合使用,例如:QSpinBox::up-button:hover。

下面列出可用的子部件类型:

子部件                         描述

::down-arrow                     combobox或spinbox的下拉箭头

::up-arrow                    combobox或spinbox的上拉箭头

::down-button                    spinbox的向下按钮

::up-button                  spinbox的向上按钮

::drop-down                 combobox的下拉箭头

::indicator                    checkbov、radiobutton、groupbox的指示器

::item                          menu、menubar、statusbar的子项目

::menu-indicator            pushbutoon的菜单指示器

::title                           groupbox的标题

最后注意:通过指定subcontrol-position和subcontrol-origin属性、子部件可以被放置在部件箱体内的任何位置。并且,子部件的位置还可以使用相对或绝对的方式进一步的调整。另外,子部件还会随着父部件而变化。

11Qt样式表的更多相关文章

  1. CSS样式表分类

    1.内联样式表 <p  style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style  typ ...

  2. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  4. CSS样式表基础

    CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...

  5. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  6. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  7. Qt——浅谈样式表

    优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...

  8. 3、CCS样式表

    一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...

  9. html嵌入样式表

    1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题,未涉及div飘操作 处理页面CSS 先检测该内容部分是否已经设定了样式,如果没有单独设定再按照总体设计进行限定. eg:  h1 h ...

随机推荐

  1. python2.0_s12_day11_SqlAlchemy使用介绍

    SqlAlchemy ORM ORM的解释; 简单点:对象关系映射. 需求:我们写一个主机管理,把主机信息存在数据库,一开始我们编程不熟练的时候,执行命令时候要调用数据库,会把相应的SQL语句写到代码 ...

  2. oracle中的内连接和外连接区别

    表t_user1,t_user2,t_user3,各有id,name两列 id name 1 10A 2 20A id name 1 10B 3 30B id name 1 10C 4 40C 连接分 ...

  3. Topic 与 Partition

    Topic在逻辑上可以被认为是一个queue队列,每条消息都必须指定它的topic,可以简单理解为必须指明把这条消息放进哪个queue里.为 了使得Kafka的吞吐率可以水平扩展,物理上把topic分 ...

  4. lower()

    lower() 用于把字符串中的大写字母转换成小写字母 In [1]: str = "Hello World" In [2]: str.lower() Out[2]: 'hello ...

  5. TortoiseSVN中分支和合并实践【转】

    使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响,最主要的原因是,自己对分支的目的和合并 ...

  6. 静态同步synchronized方法和synchronized(class)代码块

    关键字synchronized还可以应用在static静态方法上,如果这样写,那是对当前的*.java文件对应的Class类进行持锁. package synStaticMethod; /** * C ...

  7. CRUX下实现进程隐藏(3)

    通过一个内核模块拦截文件系统的回调函数来实现进程隐藏. VFS(Virtual File System)是Linux在实际文件系统(如ext3,ext4,vfat等)上抽象出的一个文件系统模型,简单来 ...

  8. Hadoop命令别名

    [hadoop@master ~]$ alias hdfs='hadoop dfs' [hadoop@master ~]$ hdfs -ls / drwxrwxr-x   - hadoop super ...

  9. 边的双联通+缩点+LCA(HDU3686)

    Traffic Real Time Query System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  10. 利用aspose-words 实现 java中word转pdf文件

    利用aspose-words  实现 java中word转pdf文件 首先下载aspose-words-15.8.0-jdk16.jar包 引入jar包,编写Java代码 package test; ...