Qt样式表使用

1、Qt样式表

    Qt样式表(style sheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来，只是Qt样式表是用用于窗体界面的

    与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget类及其子类)的样式，从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能，使用Qt的样式表就可以很容易的实现这样的功能

QWidget{    background-color:rgb(255,255,0);    color:rgb(255,0,0);    font: 12pt "宋体";}QLineEdit{    border: 2px groove gray;    border-radius: 5px;    padding: 2px 4px;    border-color: rgb(12,45,68);}

 

原始

                                            效果

 

2、Qt样式表语法

   

a>一般句法格式

        Qt样式表的句法与HTML的CSS几乎完全相同，Qt样式表包含一系列的样式法则，一个样式法则由一个选择器和一些声明组成，例如：

QPlainTextEdit

{    font:12pt "宋体";    color:rgb(255,255,0);    background-color:rgb(0,0,0);}

    其中，QPlainTextEdit就是选择器，后面花括号里的样式声明应用于QPlainTextEdit类及其子类。

    样式声明部分是样式法则列表，每个样式法则列表由"属性:值"组成，每条法则用分号结束。

    b>选择器selector

    Qt样式表支持CSS2中定义的所有选择器，常用选择器如下

• 1、通用选择器 *

  • 所有组件

• 2、类型选择器 QPushButton

  • 所有QPushButton类及其子类的组件

• 3、属性选择器 QPushButton[flat="false"]

  • 所有flat属性为false的QPushButton类及其子类的组件。

  • 如果样式表应用后组件的属性再发生变化，需要重新应用样式表才能刷新显示效果

• 4、非子类选择器 .QPushButton

  • 所有QPushButton类的组件，但是不包括QPushButton的子类

• 5、ID选择器 QPushButton#btnOK

  • ObjectName为btnOK的QPushButton实例

• 6、从属对象选择器 QDialog QPushButton

  • 所有从属于QDialog 的QPushButton类的实例，即QDialog对话框里的所有QPushButton

• 7、子对象选择器 QDialog>QPushButton

  • 所有直接从属于QDialog 的QPushButton类的实例

    这些选择器的定义为选择界面组件提供了灵活性。选择器可以组合使用，一个样式声明可以应用于多个选择器，例如：

QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{    color: rgb(255, 255, 0);    background-color: rgb(0, 0, 0);}

    这个样式声明将同时应用于QPlainTextEdit、QLineEdit、QPushButton和QCheckBox的实例。

QLineEdit[readOnly="true"], QCheckBox[checked="true"]{ background-color: rgb(255, 0, 0) }

    上面的这个样式应用于readonly属性为true的QLineEdit和checked属性为true的QCheckBox实例，功能是使其背景颜色为红色。

    在Qt中，可以为一个界面组件使用QObject::setProperty〇设置一个动态属性，例如，在数据表编辑界面上，一些字段是必填字段，就可以为这些字段的关联组件设置一个required属性为true,如：

 editName->setProperty{"required", "true");    comboSex-> setProperty("required", "true");    checkAgree-> setProperty("rpqui red", "true")；

    这样设置了三个界面组件的动态属性required为tme。

    那么，可以应用下面的样式将这种必填字段的背景颜色设置为亮绿色。

•  

*[required="true"] {background-color: lime}

    c>子控件（sub-controls)

    对于一些组合的界面组件，需要对其子控件进行选择，如QComboBox的下拉按钮，或QSpinBox的上、下按钮。通过选择器的子控件可以对这些界面元素进行显示效果控制。例如：

•  

QComboBox::drop-down{ image: url(:/images/images/down.brap); }

    选择器QComboBox::drop-down选择了 QComboBox的drop-down子控件，定义的样式是设置其image属性为资源文件中的图片down.bmp。

QSpinBox::up-button{ image: url<:/images/images/up.bmp); }QSpinBox::down-button{ image: url(:/images/images/down.bmp); }

    这两条样式定义语句分别定义了 QSpinBox的上、下按钮的图片，用资源文件中的图片替代了缺省的图片。

    这样定义的QComboBox和QSpinBox具有如下图所示效果

    

    Qt中常见子类控件如下：

• ::branch

  • QTreeView的分支指示器

• ::chunk

  • QProgressBar的进度显示块

• ::cIose-button

  • QDockWidget或QTabBar页面的关闭按钮

• ::down-arrow

  • QComboBox，QHeaderView (排序指示器)，QScrollBar 或 QSpinBox 的下拉箭头

• ::down-button

  • QScrollBar或QSpinBox的向下按钮

• ::drop-down

  • QComboBox的下拉按钮

• ::float-button

  • QDockWidget的浮动按钮

• ::groove

  • QSlider的凹槽

• ::indicator

  • QAbstractltemView，QCheckBox, QRadioButton，可勾选的 QMenu 菜单项，或可勾选的QGroupBox的指示器

• ::handle

  • QScrollBar，QSplitter 或 QS丨ider 的滑块

• ::icon

  • QAbstract丨temView 或 QMenu 的图标

• ::item

  • QAbstractltemView，QMenuBar，QMenu，或 QStatusBar 的—个项

• ::left-arrow

  • QScrollBar的向左箭头

• ::menu-arrow

  • 具有下拉菜单的QToolBimon的下拉箭头

• ::menu-button

  • QToolButton的菜单按钮

• ::menu-indicator

  • QPushButton的菜单指示器

• ::right-arrow

  • QMenu或QScrollBar的右侧箭头

• ::pane

  • QTabWidget 的面板

• ::scroller

  • QMenu或QTabBar的卷轴

• ::section

  • QHeaderView 的分段

• ::separator

  • QMenu 或 QMainWindow 的分隔器

• ::tab

  • QTabBar 或 QToolBox 的分页

• ::tab-bar

  • QTabWidget的分页条。这个子控件只用于控制QTabBar在QTabWidget中的位置，定义分页的样式使用::tab子控件

• ::text

  • QAbstracdtemView 的文字

• ::title

  • QGroupBox 或 QDockWidget 的标题

• ::up-arrow

  • QHeaderView (排序指示器)，QScroIlBar或QSpinBox的向上箭头

• ::up-button

  • QSpinBox的向上按钮

4.伪状态（pseudo-states)

    选择器可以包含伪状态，使得样式法则只能应用于界面组件的某个状态，也就是一种条件应用法则。伪状态出现在选择器的后面，用一个分号（:）隔开。如下面的样式法则：

QLineEdit:hover {    background-color: black;    color: yellow;}

定义了当鼠标移动到QLineEdit上方时（hover),改变QLineEdit的背景色和前景色。

可以对伪状态取反，方法是在伪状态前面加一个感叹号(!)，如：

•  

QLineEdit:!read-only{ background-color: rgb{235, 255, 251); }

这定义了 readonly属性为false的QLineEdit的背景色。

伪状态可以串联使用，相当于逻辑与的计算，例如：

•  

QCheckBox:hover:checked{ color：red; }

这定义了当鼠标移动到一个被勾选了的QCheckBox组件上方时，其字体颜色变为红色。

伪状态可以并联使用，相当于逻辑或的计算，例如：

•  

QCheckBox:hover, QCheckBox:checked{ color: red; }

这表示鼠标移动到QCheckBox组件上方，或QCheckBox组件被勾选时，字体颜色变为红色。

子控件也可以使用伪状态，如：

•  
•  

QCheckBox::indicator:checked{ image: url(:/images/images/checked.bmp);}QCheckBox::indicator:unchecked{image: url(:/images/images/unchecked.bmp);}

这里定义了 QCheckBox 的 indicator 在 checked 和 unchecked 两种状态下的显示图片，可以得到如图所示的效果。

Qt样式定义中常见的一些伪状态见下表,熟悉这些伪状态并灵活应用可以定义自己想要的界面效果。

• :active

  • 当组件处于一个活动的窗体时，此状态为真

• :adjoins-item

  • QTreeView::branch与一个条目相部时，此状态为真

• :altemate

  • 当QAbstractltemView的altematingRowColors()属性为true时，绘制交替的行时此状态为真

• :bottom

  • 组件处于底部，如QTabBar的表头位于底部

• :checked

  • 组件被勾选，如QAbstractButton的checked属性为true

• :closable                 

  • 组件可以被关闭，例如当QDockWidget的DockWidgetClosable属性为true时

• :closed                

  •  条目处于关闭状态，例如QTreeView的一个没有展开的条目

• :default                   

  • 条目是缺省的，如一个缺省的QPushButton按钮，或QMenu中一个缺省的action

• :disabled                 

  • 条目被禁用

• :editable                 

  • QComboBox 是可编辑的

• :edit-focus               

  • 条目有编辑焦点

• :enabled                 

  • 条目被使能

• :exclusive                

  • 条目是一个排他性组的一部分，例如一个排他性QActionGroup的一个菜单项

• :first                     

  • 第一个项，例如QTabBar中的第一个页

• :flat                    

  • 条目是flat的，例如QPushButton的flat属性设置为true时

• :focus               

  • 条目具有输入焦点

• :has-children            

  • 条目有子条目，例如QTreeView的一个节点具有子节点

• :horizontal               

  • 条目具有水平方向

• :hover              

  • 鼠标移动到条目上方时

• :last                    

  • 最后一个项，例如QTabBar中的最后一页

• :left                    

  • 条目位于左侧，例如QTabBar的页头位于左侧

• :maximized               

  • 条目处f最大化，例如最大化的QMdiSubWindow窗口

• :minimized               

  • 条目处丁-最小化，例如最小化的QMdiSubWindow窗口

• :movable                 

  • 条目是可移动的

• :off                 

  • 对于可以切换状态的条目，其状态处于off

• :on                 

  • 对于可以切换状态的条目，其状态处于on

• :open                              

  • 条目处于打开状态，例如QTreeView的一个展开的条目

• :pressed                           

  • 条目上按下了鼠标

• :read-only                      

  • 条目是只读或不可编辑的

• :right                           

  • 条目位于右侧，例如QTabBar的页头位于右侧

• :selected                  

  • 条目被选中，例如QTabBar中一个被选中的页，或QMenu中一个被选中的菜单项

• :top                 

  • 条目位于顶端，例如QTabBar的页头位于顶端

• :unchecked               

  • 条目处于被被选中状态

• :vertical  

  • 条目处于垂直方向

5.属性

    Qt样式表内对每一个选择器可定义多条样式规则，每个规则是一个"属性:值"对，Qt样式表中可定义的属性很多，可以在Qt的帮助文件中查找“Qt Style Sheets Reference”查看所有属性的详细说明。

    从上方的几个按钮的下拉菜单中可以设计常用的一些属性，如“Add Resource”按钮下三个菜单项可以从

项目的资源文件中选择图片作为background- image、border-image 或 image 属性的值：“Add Color” 按钮的下拉菜单用于设置组件的各种颜色，包括前景色、背景色、边框颜色等，颜色的值可以用rgb()、rgba()函数表示，或Qt能识别的颜色常量。

    使用样式表可以定义组件复杂的显示效果。每个界面组件都可以用如图16-7所示的盒+模型（BoxModel)来表示，模型由四个同心矩形表示。

1. content是显示内容矩形区域，如QLineEdit用于显示文字的区域，min-width、max-width、min-height和max-height属性定义最大/最小宽度或高度，就是定义这个矩形区，例如：

QLineEdit{    min-width:50px;    max-height:4 Opx;}

这定义QLineEdit最小宽度为50px，最大高度是40px，其中px是单位，表示像素。

2.padding是包围content的矩形区域，通过padding属性可以定义padding的宽度，或padding-top、padding-bottom、padding-left 和 padding-right 分别定义 padding 的上、下、左、右宽度，例如：

QLineEdit{ padding: 0px 10px 0px 10px;}

这设定padding的上、右、下、左的宽度，它等效于：

QLineEdit{    padding-top:Opx;    padding-right:lOpx;    padding-bottom: Opx;    padding-left:lOpx;}

3. border 是包围 padding 的边框，通过 border 属性（或 border-width、border-style、border-color)可以定义边框的线宽、线型和颜色，也可以分别定义border的上、下、左、右的线宽和颜色。使用border-radius可以定义边框转角的圆弧半径，从而构造具有圆角矩形的编辑或按钮等组件，例如：

• QLineEdit{ border-width: 2px; border-style: solid; border-color: gray; border-radius: 1Opx; padding: Opx 1Opx;}

这使得QLineEdit具有灰色边框线条、圆角矩形的效果。

通过border-radius、min-width和min-height等属性可以设计圆形的按钮，如：

QPushButton {    border: 2px groove red;    border-radius: 3Opx;    min-width:60px;    min-height:60px;      }

使得边框转角半径等于content宽度或长度的一半，宽度和长度相等，就可以得到一个圆形的按钮。

使用border-image属性还可以为组件设置背景图片，图片会填充border矩形框之内的区域，

—般使用材质图片设置背景，以使界面具有统一的特色，例如：

QLineEdit, QPushButton{border-image: url(:/images/images/border.jpg);}

4. margin是border之外与父组件之间的空白边距，可以分别定义上、下、左、右的边距大小。

    缺省的情况下，margin、border-width和padding属性缺省值为零，这种情况下，四个同心矩形就是重合的一个矩形

    使用Qt样式表可以为界面组件设计各种美观的显示效果，美观而特殊的界面不仅需要编程的能力，更需要的是美工设计能力