qt样式表使用说明

《qt样式表使用说明》由会员分享，可在线阅读，更多相关《qt样式表使用说明（73页珍藏版）》请在金锄头文库上搜索。

1、嗯嗯 Qt 样式使用说明样式使用说明一、声明：一、声明：1文档说明：文档说明：学习学习 QtQt 样式表前提样式表前提：如果你了解 CSS，那么我相信这对你来说会很容易理解并应用于实际界面美化，它与 CSS 有些相似之处，当然如果同时也了解 Qt，那么你会很快学会如何运用 Qt 样式为程序设 计出漂亮的界面。 阅读本说明文档：阅读本说明文档：首先一、阅读声明一、阅读声明，二、名词解释二、名词解释，三、语法简介三、语法简介，六、附属例题解释六、附属例题解释，每次实验并对 照着五、样式表参照表五、样式表参照表，体会并学习如何运用样式表里关键词。样式表参照表之间的关系很复杂：样式表参照表之间的关系很

2、复杂：很多需要重复描述的选择器、属性、值选择器、属性、值，但由于本文档不能跳转，所以要自己去查找， 按照它语法关系层层迭代定位表格语法关系层层迭代定位表格，并按照字母表顺序定位按照字母表顺序定位要查找内容的大概范围。 这里的表格以 Qt help 文档为准。 暂不介绍暂不介绍：为了尽快完成本文档的初步可使用的目的，很多在本程序中暂时用不到的窗口部件暂 未解释介绍，窗口部件介绍表格中会提到“暂不介绍” ，但是辅助控制器，属性，值都是完 全展示在表格中。附加的例题格式说明：附加的例题格式说明： 例子是经过实验得出的结论，用 C 语言的注释方式添加到相应的样式代码后面，当然 你的文件( .CSS)

3、同样满足这个注释方式。/* 注释内容 */*imagesForExample: example_for_XXX000.png */实例图片 如何做实验：如何做实验：Qt 源码 bin 目录下的 designer.exe,运行/拖入控件/右键/改变样式表/应用；Qt Creator 也可以。 遇到问题请尽快联系作者遇到问题请尽快联系作者2背景介绍：背景介绍：Qt 为图形界面应用程序提供一个完整的 C+应用程序开发框架。Qt 的样式表主要是受到 CSS 的启发，通过调用 QWidget:setStyleSheet()或 QApplication:setStyleSheet()，你可以为一个独立的子

4、部件、整个窗口，甚至是整个应用程 序指定一个样式表。样式表由影响窗口部件绘制的样式规则组成。这些规则都是普通文本。 由于在运行时会解析样式表，所以可以通过定制样式表的方式来尝试设计不同的 Qt 应用程 序。 二、名词解释：二、名词解释：1. 选择器（选择器（selector）意思是：选择特定的类，一般为一个可以定制样式表的 Qt 类，所有可以作为选择器的 Qt 类都在五、样式参照表五、样式参照表：2. 可以应用样式表的窗口部件表可以应用样式表的窗口部件表=选择器中选择器中列出，选择器的格 式参照五、样式参照表五、样式参照表： 1 样式选择器类型表样式选择器类型表。所谓的选择器可以理解为 CSS

5、 中的选择器，他指定了一类部件进行设计。2. 辅助控制器（辅助控制器（sub-control）辅助控制器 一词是相对于选择器存在的，可以理解为我们选择了一个部件，例如一个QCheckBox，这个部件它分为两个部分，文本部分和可以点击的小窗口的部分。而这个可点击的小窗口部分我们要单独的设置，就要再次分离出来，就需要: :indicator(QCheckBox 有这个辅助控制器)来设置，如下例题： QCheckBox:indicator width:20px; height:20px; /*说明是在 QCheckBox 中的指示符（indicator）宽为 20px，height 为 20px。*

6、/ 辅助控制器是用 : 双冒号进行指定。 如果没有:indicator 那么我们这个小例子将是对整个 QCheckBox 设置的，使用了辅助控制器 的时候就自动分离出这个小窗口，对小窗口进行设置。 不同的选择器有不同的辅助控制器，具体可查看五、样式表参照表：五、样式表参照表：3. 辅助控制器列表辅助控制器列表 中详细介绍相应的辅助控制器在不同的类中应用，详细说明在类中的什么位置。3. 状态（状态（pseudo-states）除了辅助控制器对一个部件的分离，样式表还可以根据窗口部件的各个状态来设置窗口。 例如 hover 表示鼠标划过时的状态，例子如下： QCheckBox:hover colo

7、r: red; /*例子说明只有当鼠标滑过复选框文本时变为 red*/ 状态是用 : 冒号进行区分每一个状态。 更详细的状态列表在五、样式表参照表：五、样式表参照表：3 状态列表中状态列表中查找 状态可以多个一起使用，也可以和辅助控制器一起使用，这样设置窗口部件的时候分的会 更加详细。 如下小例子: QCheckBox:hover,QCheckBox:checkedcolor:red; QPushButton:hover color:red; 4. 属性属性它是一个窗口部件所固有的特征、性质，每一个窗口部件都会有属于他们自己的属性。 如前面做的小例子中我们一直未曾提过 color,width,

8、height 等。组合多个属性同时使用设计 出多种效果。五、样式表参照表：五、样式表参照表：4 属性列表属性列表查找有更多的详细介绍。5. 值值是属性 : 后面跟随的一组数字，颜色或者是一个 bool 类型等这些我们称它为值，这些 值决定了窗口部件的最终的展示效果。 查看值的表达方式 五、样式表参照表：五、样式表参照表：4 值列表值列表6.逻辑否（！）逻辑否（！）有时候我们在设置某种状态的属性时，希望同时在某些非（！）的状态下设置，这个时 候我们就要用（！）来选择某种状态，比如!checked 、!has-children（没有子目录）等等。7. 盒模型（盒模型（TheThe BoxBox M

9、odelModel）这个模式指定了 4 个影响布局的矩形，从而绘制一个自定义的窗口部件。 1.Content rectangle 是最里面的矩形，它绘制窗口部件内容（如文字，图片）的地方。 2.padding rectangle 包围 content rectangle。它负责由 padding 属性指定填充操作。主要是 窗口部件内容与边缘线(border)之间的空隙，它可以用 top，right，bottom 和 left 设置它的 大小。 3.border rectangle 包围 padding rectangle。它为边界预留空间。可以认为是窗口的外框线。 下面讲的分割图形的方法中把

10、border 当做是一个区域来理解的。参考四、高级应用：九宫四、高级应用：九宫 格分割法格分割法 4.margin rectangle 最外面的矩形，他包围 border rectangle，负责指定的边缘空白区域，主 要是负责与其他的窗口部件的距离。 如果没有指定他们四个，则默认是四个重合在一起的。 如图：8.角弧度角弧度窗口部件四个角弧度。radius 设置角的弧度，如 border-radius:4px; 角的弧度是 4px。9.背景色和前景色背景色和前景色部件的前景色用于绘制窗口部件上面的文本，可以通过 color 属性指定。背景色用于绘制窗口部件的填充矩形，可以通过 backgrou

11、nd-color 属性指定。背景图片使用 background-image 属性定义，它用于绘制由 background-origin 指定在盒模 式中四个区域的图片开始显示的起点位置。背景图片在盒模式域内的对齐和平铺方式可以 通过 background-position 和 background-repeat 属性指定。如果指定的背景图片具有 alpha 通道（透明效果） ，通过 background-color 指定的颜色将 会透过透明区域。在 background-color 属性中有介绍。10.（#）指定某一个按钮，#号后面是指定类的对象名。要知道代码才能运用。3、语法介绍与问题解决：

12、语法介绍与问题解决：1.语法语法选择器选择器 属性属性 : : 值值 ; ; QPushButtoncolor：red；选择器选择器 : : 状态状态 属性属性 : : 值值 ; ; QPushButton ：hover color ：red；选择器选择器 : 辅助控制器辅助控制器 属性属性 : : 值值; ; QCheckBox：indicator color：red；选择器选择器 : 辅助控制器辅助控制器 , , 选择器选择器 : 辅助控制器辅助控制器 属性属性 : : 值值; ; QTabBar:tab:selected, QTabBar:tab:hover background: ql

13、ineargradient(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，QCheckBoxcolor ：r

14、ed； 你可以任意的组合，当然这只是简单的组合，还有更加复杂的组合。 1.可以先查看一下选择器的表达方式，考虑一下是只对一个类进行操作还是，对整个 界面操作，仔细阅读整个表格 1.样式选择器类型表确定应用哪种样式表。 2.选择器的格式确定后，就要确定你要所要针对的具体的类型，那么就参照 2.可以应用样式表的窗口部件。 3.之后就查看你所要应对的选择器里的部分进行设置，就要再去查看辅助控制器。 4.再分的细一点，搞清楚一个窗口部件分为几个状态，鼠标划入，点击，关闭. 他们决定了你所要设置状态的属性设置。 5.定位了前面的，就要改变他的特性了，也就是进行属性设置，查找属性表，对应属 性表超找对应的

15、值表，也有可能还要通过值表的迭代（值的值还需要一个方式表达。 ）最终 知道这个值是数字，还是一个颜色，或者是一个 bool 类型，抑或是其他的关键词(如 padding、content.)。仔细阅读他们之间的关系。2.遇到问题遇到问题也许你已经组合了很多的样式表，但是有时候你会发现，有时候有些属性值不起作用， 或者说图像变形，并不是你所要看到的效果，不要着急。 1.查看一下你的语法是否正确，如果你保证确保无误的话，那么就想一想，是否是在构建 这个窗口控件之前进行设置的，这个会影响到你的属性是否被读入。参考六、附属例题解六、附属例题解 释：释：32.32. 定制定制 QToolQTool 查看是

16、否被其他的属性覆盖。当一个属性被具有同一选择器的几个规 则设置时，那么只有最后一个规则起作用（这是一个难点） 。 2.查看是否有相应的关联的属性已被设为 bool=1。 3.图片无法显示：查看路径是否正确在 Qt 中是”/”代替 window 下的”,使用相对路径， 本应用程序的相对路径（是相应程序读取这个样式 css 文件） ，当然你也可以写绝对路径的 方式读取图片，但是路径这个方法是不提倡的。 4.4.大小变化的窗口控件是否背景图片选择了 border-image。详细参考四、高级应用四、高级应用与六、六、 附属例题解释：附属例题解释：34.QPushButton34.QPushButton 与与 imageimage4、高级应用：高级应用：1.九宫格分割法：九宫格分割法：之所以叫做九宫