没有合适的资源?快使用搜索试试~ 我知道了~
首页Qt样式表使用说明.pdf
资源详情
资源评论
资源推荐

嗯 Qt 样式使用说明
一、声明:
1.文档说明:
学习 Qt 样式表前提 :
如果你了解 CSS,那么我相信这对你来说会很容易理解并应用于实际界面美化, 它与 CSS
有些相似之处,当然如果同时也了解 Qt,那么你会很快学会如何运用 Qt 样式为程序设计出
漂亮的界面。
阅读本说明文档:
首先 一、阅读声明 ,二、名词解释 ,三、语法简介 ,六、附属例题解释 ,每次实验并对
照着 五、样式表参照表 ,体会并学习如何运用样式表里关键词。
样式表参照表之间的关系很复杂:
很多需要重复描述的 选择器、属性、值 ,但由于本文档不能跳转,所以要自己去查找,
按照它 语法关系层层迭代定位表格 ,并 按照字母表顺序定位 要查找内容的大概范围。
这里的表格以 Qt help 文档为准。
暂不介绍 :
为了尽快完成本文档的初步可使用的目的, 很多在本程序中暂时用不到的窗口部件暂未
解释介绍,窗口部件介绍表格中会提到“暂不介绍” ,但是辅助控制器,属性,值都是完全
展示在表格中。
附加的例题格式说明:
例子是经过实验得出的结论, 用 C语言的注释方式添加到相应的样式代码后面, 当然你
的文件 ( .CSS) 同样满足这个注释方式。
/* 注释内容 */
/*imagesForExample: example_for_XXX000.png */ 实例图片
如何做实验:
Qt 源码 bin 目录下的 designer.exe, 运行 / 拖入控件 / 右键 / 改变样式表 / 应用;
Qt Creator 也可以。
遇到问题请尽快联系作者
2.背景介绍:
Qt 为图形界面应用程序提供一个完整的 C++应用程序开发框架。
Qt 的 样 式 表 主 要 是 受 到 CSS 的 启 发 , 通 过 调 用 QWidget::setStyleSheet() 或
QApplication::setStyleSheet() ,你可以为一个独立的子部件、 整个窗口, 甚至是整个应用程序
指定一个样式表。 样式表由影响窗口部件绘制的样式规则组成。 这些规则都是普通文本。 由
于在运行时会解析样式表, 所以可以通过定制样式表的方式来尝试设计不同的 Qt 应用程序。

二、名词解释:
1. 选择器( selector)
意思是:选择特定的类,一般为一个可以定制样式表的 Qt 类,所有可以作为选择器的
Qt 类都在 五、样式参照表 :2. 可以应用样式表的窗口部件表 =选择器中 列出,选择器的格
式参照 五、样式参照表 : 1 样式选择器类型表 。
所谓的选择器可以理解为 CSS中的选择器,他指定了一类部件进行设计。
2. 辅助控制器( sub-control)
辅助控制器 一词是相对于选择器存在的,可以理解为我们选择了一个部件,例如一个
QCheckBox, 这个部件它分为两个部分, 文本部分和可以点击的小窗
口的部分。而这个可点击的小窗口部分我们要单独的设置,就要再次分离出来,就需
要::indicator(QCheckBox 有这个辅助控制器 )来设置,如下例题:
QCheckBox::indicator{
width:20px;
height:20px;
}
/* 说明是在 QCheckBox中的指示符( indicator )宽为 20px,height 为 20px。*/
辅助控制器是用 :: 双冒号进行指定。
如果没有 ::indicator 那么我们这个小例子将是对整个 QCheckBox 设置的,使用了辅助控制器
的时候就自动分离出这个小窗口,对小窗口进行设置。
不同的选择器有不同的辅助控制器,具体可查看 五、样式表参照表: 3. 辅助控制器列表
中详细介绍相应的辅助控制器在不同的类中应用,详细说明在类中的什么位置。
3. 状态( pseudo-states)
除了辅助控制器对一个部件的分离, 样式表还可以根据窗口部件的各个状态来设置窗口。
例如 hover 表示鼠标划过时的状态,例子如下:
QCheckBox:hover{
color: red;
}
/* 例子说明只有当鼠标滑过复选框文本时变为 red*/
状态是用 : 冒号进行区分每一个状态。
更详细的状态列表在 五、样式表参照表: 3 状态列表中 查找
状态可以多个一起使用, 也可以和辅助控制器一起使用, 这样设置窗口部件的时候分的会更
加详细。
如下小例子 :
QCheckBox:hover,QCheckBox:checked{

color:red;
}
QPushButton::hover{
color:red;
}
4. 属性
它是一个窗口部件所固有的特征、性质,每一个窗口部件都会有属于他们自己的属性。
如前面做的小例子中我们一直未曾提过 color,width,height 等。组合多个属性同时使用设计出
多种效果。 五、样式表参照表: 4 属性列表 查找有更多的详细介绍。
5. 值
是属性 : 后面跟随的一组数字,颜色或者是一个 bool 类型等这些我们称它为值,这些
值决定了窗口部件的最终的展示效果。
查看值的表达方式
五、样式表参照表: 4 值列表
6.逻辑否(!)
有时候我们在设置某种状态的属性时, 希望同时在某些非(! )的状态下设置,这个时候
我们就要用(! )来选择某种状态,比如 !checked 、!has-children (没有子目录)等等。
7. 盒模型( The Box Model )
这个模式指定了 4 个影响布局的矩形,从而绘制一个自定义的窗口部件。
1.Content rectangle 是最里面的矩形,它绘制窗口部件内容(如文字,图片)的地方。
2.padding rectangle 包围 content rectangle 。它负责由 padding属性指定填充操作。主要是窗
口部件内容与边缘线 (border) 之间的空隙, 它可以用 top,right ,bottom 和 left 设置它的大小。
3.border rectangle 包围 padding rectangle 。它为边界预留空间。可以认为是窗口的外框线。
下面讲的分割图形的方法中把 border 当做是一个区域来理解的。参考 四、高级应用:九宫
格分割法
4.margin rectangle 最外面的矩形,他包围 border rectangle ,负责指定的边缘空白区域,主
要是负责与其他的窗口部件的距离。
如果没有指定他们四个,则默认是四个重合在一起的。
如图:

8.角弧度
窗口部件四个角弧度。 radius 设置角的弧度,如 border-radius:4px;
角的弧度是 4px。
9.背景色和前景色
部件的前景色用于绘制窗口部件上面的文本,可以通过 color 属性指定。
背景色用于绘制窗口部件的填充矩形,可以通过 background-color 属性指定。
背景图片使用 background-image 属性定义,它用于绘制由 background-origin 指定在盒模式
中四个区域的图片开始显示的起点位置。 背景图片在盒模式域内的对齐和平铺方式可以通过
background-position 和 background-repeat 属性指定。
如果指定的背景图片具有 alpha 通道(透明效果) ,通过 background-color 指定的颜色将
会透过透明区域。在 background-color 属性中有介绍。
10.(#)
指定某一个按钮, #号后面是指定类的对象名。要知道代码才能运用。
三、语法介绍与问题解决:
1.语法
选择器 {
属性 : 值 ;
}
QPushButton{

color :red ;
}
选择器 : 状态 {
属性 : 值 ;
}
QPushButton :hover{
color : red ;
}
选择器 :: 辅助控制器 {
属性 : 值;
}
QCheckBox:: indicator{
color :red ;
}
选择器 :: 辅助控制器 , 选择器 :: 辅助控制器 {
属性 : 值;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
选择器 : 状态 , 选择器 : 状态 {
属性 : 值;
}
QPushButton:hover, QPushButton:pressed{
color : red;
}
选择器 , 选择器 , 选择器 {
属性 : 值;
}
QLineEdit , QPushButton ,QCheckBox{
color :red ;
}
你可以任意的组合,当然这只是简单的组合,还有更加复杂的组合。
1. 可以先查看一下选择器的表达方式, 考虑一下是只对一个类进行操作还是, 对整个界
面操作,仔细阅读整个表格 1. 样式选择器类型表确定应用哪种样式表。
2. 选择器的格式确定后,就要确定你要所要针对的具体的类型,那么就参照 2. 可以应
剩余72页未读,继续阅读











安全验证
文档复制为VIP权益,开通VIP直接复制

评论0