学习与分享之QSS

1、 欧阳璐天朗时代研发中心 2014/5/26Hi！文档说明文档说明本PPT中采用的图片和部分素材来自网络截图，部分截图来源于自绘，语言组织由本人完成，欢迎提出建议和意见。素材链接：http:/ Maker For PDF/EPUB 资源包黑色皮肤资源包黑色皮肤1.什么是QSS样式表？2.为什么要使用QSS编辑皮肤？3.如何使用样式表？4.示例5.其他注意内内 容容 导导 览览什么是QSS样式表先给大家看一段先给大家看一段QSS的样式表的样式表demo：QPushButton border: 2px solid #8f8f91; border-radius: 6px; background-co

2、lor: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; QPushButton:pressed background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); QPushButton:hover background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, st

3、op: 0 #dadbde, stop: 1 #f6f7fa); 样式表存在于一个文件中，Qt样式表的文件统一拓展名为*.qss，用来存放样式和效果代码。然后通过Qt程序的引用将定制的效果设置到程序中。 对对Qt程序界面的定制有两种方法：程序界面的定制有两种方法： 使用程序继承并实现一个QStyle的子类 Qt样式表的使用。样式表的由来：样式表的由来：仿照仿照CSS样式表的模式对界面程序样式进行定制与修改。样式表的模式对界面程序样式进行定制与修改。Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)， 通过调用QWidget:setStyleSheet()或QApplicatio

4、n:setStyleSheet()从而可以为一个独立的子部件、整个窗口，甚至是整个应用程序指定一个样式表。 样式表的程序引用：样式表的程序引用： 通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。这个特殊的子类实际上是其他的系统特定风格类的包裹类， 它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。为什么要使用QSS编辑皮肤优点优点: 样式表的引入，使得定制Qt的外观样式变的非常简单。 程序和界面外观定制进行分离，独立开发。 样式定义精确到像素的级别 降低了服务器的成本 可以使用多套样式，更换界面或者切换效果更加方便 便于维护，便于管理 界面更加友好

5、 使用方便等如何使用样式表？1.样式表原理：方箱模型样式表原理：方箱模型 对于任何一个控件或者控件里的子部件，可以这样了理解，相对于右图，一个空间可以分为四个区域边框：Margin ：控件最外围的空白区域，总是透明的Border ：控件的外边框Padding：控件的外边空到内显示区域的空白区域Content：控件的最内显示区域注意：当注意：当Margin大小为大小为0时，控件大小就是显示的实际大小时，控件大小就是显示的实际大小.2.样式表调整的对象：样式表调整的对象：各个空间和控件中的各个子控件。3.样式表调整的内容：样式表调整的内容：控件大小控件位置控件状态控件背景等当然，首先我们得了解其通

6、用的格式通用的格式.4.样式表基本语法：样式表基本语法：一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式：selector attribute: value 选择器(selector)通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。selector #ObjectNameattribute: value ObjectName是一个指定的控件的名字，一般由程序中调用setObjectName()来指定。注意：注意：前一个的样式，会被后来的样式所覆盖前一个的样式，会被后来的

7、样式所覆盖.为了使用方便，我们还可以使用一种简化形式，这样： selector1, selector2, ., selectorM attribute1: value1;attribute2: value2;.attributeN: valueN;如：QCheckBox, QComboBox, QSpinBox color: red;background-color: white;font: bold; 当然也可以这样： selector1#ObjectName1, selector2#ObjectName1, ., selectorM #ObjectName1 attribute1: val

8、ue1;attribute2: value2;.attributeN: valueN;如：QCheckBox#MainCheckBox, QComboBox#MainComboBox,QSpinBox#MainSpinBox color: red;background-color: white;font: bold;5.控件子控件了解：子部件微观样式化控件子控件了解：子部件微观样式化界面是如何通过qss来定制不同的效果？为什么同一种控件可以产生不同的显示效果？这个就得从控件的构成开始说。 这是一个滚动条，如左图，控件名为QScrollBar ，如图所示，有着很多的子控件，而每一个子控件都可以定

9、制不同的效果，综合起来就成了一套效果。因此在进行QSS开发是需要了解的是某个控件分别有些什么子控件。下页是一些基本的字控件（sub-control）列表：6.控件状态及效果分析：控件状态及效果分析：以下是几种常见的状态：示例1.控件大小等设定：控件大小等设定：对某一个控件的大小进行调整很简单，使用width、height进行调整即可，当然也可以添加min-、max-前缀进行修饰，最小单位为像素（PX)，用于调整界面整体效果，如：QWidget#MainWindowsHeadBar margin:0px;/margin外框为0个像素 border:2px solid red;/border显示

10、width: 36px;/控件宽 height: 23px;/控件高 border-image:url(IMAGE_PATH/minimize.png) 1; /图片 当然这是控件大小？那么线条呢？呼当然这是控件大小？那么线条呢？呼 如上绿色字体：如上绿色字体：2px：线条为：线条为2个像素个像素solid：实线：实线red：红色：红色以下为线条以下为线条border-style的可选项，可以参照如下：的可选项，可以参照如下：其他：其他：border-radius：为设置圆角：为设置圆角border:1px solid transparent; /宽度为宽度为1px的透明实线（什么都看不到）的

11、透明实线（什么都看不到）2.控件位置等排版控件位置等排版此模块主要介绍的是相对定位：此模块主要介绍的是相对定位：位置排版就是通过微调界面控件显示位置进行排版，先给大家看两个效果，以MPR Maker For PDF为例：效果一：效果一：slider控件效果控件效果 使用前：使用后：效果一：设置对话框效果效果一：设置对话框效果 使用前：使用后：QFrame margin: 14px 18px 20px 18px;如上：进行位置偏移设置表示上右下左四个方向分别为14 18 20 18个像素，同时，我们也可以分别指定margin-top、margin-right、margin-bottom、marg

12、in-left四个属性。QFrame margin-top: 14px;margin-right: 18px;margin-bottom: 20px;margin-left: 18px; 我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip，甚至也可以将其作用于子部件上。同时，采取此方法能够实现按下弹起的状态，就是实现采用当鼠标按下动作的时候，让控件的显示位置向右下方移动几个像素，来模拟这个状态。/MPR Maker PDF 工

13、具栏Qcombobox下拉框按下动作效果实现QToolBar#CommonToolBar QComboBox:down-arrow:on top: 1px; left: 1px; 3.控件图片等显示控件图片等显示设置某一个背景的图片，有如下三种方法：设置某一个背景的图片，有如下三种方法：1.background-image2.background3.border-image4.image区别：区别：border-image：图片显示采取拉伸效果为默认缺省background-image：图片显示采取重复效果为默认缺省image：图片显示采取原图大小为默认缺省background：包含backg

14、round-image1.background-image是background中的一种，background还包含其他属性，有color，repeat，position等等；2.border-image和background-image，前者是在控件的border区域进行设置，后者是整体，包括margin区域，且同时设置，前者会覆盖在后者的图片之上。3. image不会改变图片大小传说中的传说中的九宫格九宫格：实用性很强大：实用性很强大先给个赞！如下：先给个赞！如下：了解：了解：图片在实际的应用中，如果不使用九宫格方式，图片会进行自动复制重绘平铺显示或者进行对应比例的像素画放大，如果存在阴影

15、等会出现阴影模糊，显示效果变差。而解决这个问题的方法就是九宫格。原理：原理： 程序自动按照所分配的像素进行四边的切割，然后保留边界的图片数据，自动将中间的数据进行像素化拉伸。使用举例：使用举例： border-image: url(button.png) 4 4 4 4 stretch stretch;/图片 上 右 下 左 拉伸（缺省） 拉伸（缺省）border-width：4 4 4 4；/必须有4.其他注意其他注意1.控件命名控件命名一个界面中存在很多不同的控件，而且控件可能需要不同的效果，及时现在没有，所以在编写的过程中，尽可能的对空间进行统一命名和增加使用的作用域，以减少后期的维护时

16、间成本。请调用setobjectname。 /*ScrollBar Vertical TreeView*/QWidget#DialogCentralWidget QTreeWidget#DialogTreeWigdet QScrollBar:vertical border:1px solid transparent;表示：设置存在于表示：设置存在于DialogCentralWidget这个这个widget窗口中的窗口中的DialogTreeWidget树形控件中的控件树形控件中的控件QScrollBar里面的垂直滚动条的默认显示效果。里面的垂直滚动条的默认显示效果。2.控件设计显示控件设计显示 在进行控件的显示的时候，如果在其他状态中存在某个设定，如大小，宽度，应该在主状态中也进行编写，如：/*ScrollBar Vertical TreeView*/QWidget#DialogCentralWidget QTreeWidget#DialogTreeWigdet QScrollBar:vertical border:1px solid