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样式表可以为界面组件设计各种美观的显示效果,美观而特殊的界面不仅需要编程的能力,更需要的是美工设计能力