学习与分享之QSS

1、欧阳璐 天朗时代研发中心 2014/5/26,QSS 学习与分享,Hi！,1,2,文档说明,本PPT中采用的图片和部分素材来自网络截图，部分截图来源于自绘，语言组织由本人完成，欢迎提出建议和意见。 素材链接： QSS样式实用： MPR Maker For PDF/EPUB 资源包黑色皮肤,2,2020/10/21,内 容 导 览,3,2,什么是QSS样式表,先给大家看一段QSS的样式表demo： QPushButton border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0,

2、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, stop: 0 #dadbde, stop: 1 #f6f7

3、fa); 样式表存在于一个文件中，Qt样式表的文件统一拓展名为*.qss，用来存放 样式和效果代码。然后通过Qt程序的引用将定制的效果设置到程序中。,4,2020/10/21,对Qt程序界面的定制有两种方法： 使用程序继承并实现一个QStyle的子类 Qt样式表的使用。 样式表的由来：仿照CSS样式表的模式对界面程序样式进行定制与修改。 Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)， 通过调用QWidget:setStyleSheet()或QApplication:setStyleSheet()从而可以为一个独立的子部件、整个窗口，甚至是整个应用程序指定一个样式表。 样式

4、表的程序引用： 通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。这个特殊 的子类实际上是其他的系统特定风格类的包裹类， 它会把通过样式 表指定的自定义外观风格应用在底层的系统特定风格之上。,5,2020/10/21,为什么要使用QSS编辑皮肤,优点: 样式表的引入，使得定制Qt的外观样式变的非常简单。 程序和界面外观定制进行分离，独立开发。 样式定义精确到像素的级别 降低了服务器的成本 可以使用多套样式，更换界面或者切换效果更加方便 便于维护，便于管理 界面更加友好 使用方便等,6,2020/10/21,如何使用样式表？,1.样式表原理：方箱模型 对于任何一个控件

5、或者 控件里的子部件，可以这样 了理解，相对于右图，一个 空间可以分为四个区域边框： Margin ：控件最外围的空白区域，总是透明的 Border ：控件的外边框 Padding：控件的外边空到内显示区域的空白区域 Content：控件的最内显示区域,注意：当Margin大小为0时，控件大小就是显示的实际大小.,7,2020/10/21,2.样式表调整的对象： 各个空间和控件中的各个子控件。 3.样式表调整的内容： 控件大小 控件位置 控件状态 控件背景 等 当然，首先我们得了解其通用的格式.,8,2020/10/21,4.样式表基本语法： 一个样式表由一系列的样式规则构成。每个样式规则都有

6、着下面的形式： selector attribute: value 选择器(selector)通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。 属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。 selector #ObjectName attribute: value ObjectName是一个指定的控件的名字，一般由程序中调用setObjectName()来指定。 注意：前一个的样式，会被后来的样式所覆盖.,9,2020/10/21,为了使用方便，我们还可以使用一种简化形式，这样： selector1, selector2, .

7、, selectorM attribute1: value1; attribute2: value2; . attributeN: valueN; 如： QCheckBox, QComboBox, QSpinBox color: red;background-color: white;font: bold; ,10,2020/10/21,当然也可以这样： selector1#ObjectName1, selector2#ObjectName1, ., selectorM #ObjectName1 attribute1: value1; attribute2: value2; . attribu

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

9、发是需要了解的是某个控件分别有些什么子控件。下页是一些基本的字控件（sub-control）列表：,12,2020/10/21,13,2020/10/21,6.控件状态及效果分析： 以下是几种常见的状态：,14,2020/10/21,15,2020/10/21,示例,1.控件大小等设定： 对某一个控件的大小进行调整很简单，使用width、height进行调整即可，当然也可以添加min-、max-前缀进行修饰，最小单位为像素（PX)，用于调整界面整体效果，如： QWidget#MainWindowsHeadBar margin:0px;/margin外框为0个像素 border:2px soli

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

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

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

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

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

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

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