学习与分享之QSS.ppt

欧阳璐天朗时代研发中心2014/5/26,QSS学习与分享,Hi！,文档说明,本PPT中采用的图片和部分素材来自网络截图，部分截图来源于自绘，语言组织由本人完成，欢迎提出建议和意见。素材链接：,内容导览,什么是QSS样式表,先给大家看一段QSS的样式表demo：QPushButtonborder:2pxsolid#8f8f91;border-radius:6px;background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0#f6f7fa,stop:1#dadbde);min-width:80px;QPushButton:pressedbackground-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0#dadbde,stop:1#f6f7fa);QPushButton:hoverbackground-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,stop:0#dadbde,stop:1#f6f7fa);样式表存在于一个文件中，Qt样式表的文件统一拓展名为*.qss，用来存放样式和效果代码。然后通过Qt程序的引用将定制的效果设置到程序中。,对Qt程序界面的定制有两种方法：使用程序继承并实现一个QStyle的子类Qt样式表的使用。样式表的由来：仿照CSS样式表的模式对界面程序样式进行定制与修改。Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)，通过调用QWidget:setStyleSheet()或QApplication:setStyleSheet()从而可以为一个独立的子部件、整个窗口，甚至是整个应用程序指定一个样式表。样式表的程序引用：通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。这个特殊的子类实际上是其他的系统特定风格类的包裹类，它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。,为什么要使用QSS编辑皮肤,优点:样式表的引入，使得定制Qt的外观样式变的非常简单。程序和界面外观定制进行分离，独立开发。样式定义精确到像素的级别降低了服务器的成本可以使用多套样式，更换界面或者切换效果更加方便便于维护，便于管理界面更加友好使用方便等,如何使用样式表？,1.样式表原理：方箱模型对于任何一个控件或者控件里的子部件，可以这样了理解，相对于右图，一个空间可以分为四个区域边框：Margin：控件最外围的空白区域，总是透明的Border：控件的外边框Padding：控件的外边空到内显示区域的空白区域Content：控件的最内显示区域,注意：当Margin大小为0时，控件大小就是显示的实际大小.,2.样式表调整的对象：各个空间和控件中的各个子控件。3.样式表调整的内容：控件大小控件位置控件状态控件背景等当然，首先我们得了解其通用的格式.,4.样式表基本语法：一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式：selectorattribute:value选择器(selector)通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。selector#ObjectNameattribute:valueObjectName是一个指定的控件的名字，一般由程序中调用setObjectName()来指定。注意：前一个的样式，会被后来的样式所覆盖.,为了使用方便，我们还可以使用一种简化形式，这样：selector1,selector2,.,selectorMattribute1:value1;attribute2:value2;.attributeN:valueN;如：QCheckBox,QComboBox,QSpinBoxcolor:red;background-color:white;font:bold;,当然也可以这样：selector1#ObjectName1,selector2#ObjectName1,.,selectorM#ObjectName1attribute1:value1;attribute2:value2;.attributeN:valueN;如：QCheckBox#MainCheckBox,QComboBox#MainComboBox,QSpinBox#MainSpinBoxcolor:red;background-color:white;font:bold;,5.控件子控件了解：子部件微观样式化界面是如何通过qss来定制不同的效果？为什么同一种控件可以产生不同的显示效果？这个就得从控件的构成开始说。,这是一个滚动条，如左图，控件名为QScrollBar，如图所示，有着很多的子控件，而每一个子控件都可以定制不同的效果，综合起来就成了一套效果。因此在进行QSS开发是需要了解的是某个控件分别有些什么子控件。下页是一些基本的字控件（sub-control）列表：,6.控件状态及效果分析：以下是几种常见的状态：,示例,1.控件大小等设定：对某一个控件的大小进行调整很简单，使用width、height进行调整即可，当然也可以添加min-、max-前缀进行修饰，最小单位为像素（PX)，用于调整界面整体效果，如：QWidget#MainWindowsHeadBarmargin:0px;/margin外框为0个像素border:2pxsolidred;/border显示width:36px;/控件宽height:23px;/控件高border-image:url(IMAGE_PATH/minimize.png)1;/图片当然这是控件大小？那么线条呢？呼如上绿色字体：2px：线条为2个像素solid：实线red：红色,以下为线条border-style的可选项，可以参照如下：,其他：border-radius：为设置圆角border:1pxsolidtransparent;/宽度为1px的透明实线（什么都看不到）,2.控件位置等排版,此模块主要介绍的是相对定位：位置排版就是通过微调界面控件显示位置进行排版，先给大家看两个效果，以MPRMakerForPDF为例：效果一：slider控件效果使用前：使用后：效果一：设置对话框效果使用前：使用后：,QFramemargin:14px18px20px18px;如上：进行位置偏移设置表示上右下左四个方向分别为14182018个像素，同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。QFramemargin-top:14px;margin-right:18px;margin-bottom:20px;margin-left:18px;我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip，甚至也可以将其作用于子部件上。,同时，采取此方法能够实现按下弹起的状态，就是实现采用当鼠标按下动作的时候，让控件的显示位置向右下方移动几个像素，来模拟这个状态。/MPRMakerPDF工具栏Qcombobox下拉框按下动作效果实现QToolBar#CommonToolBarQComboBox:down-arrow:ontop:1px;left:1px;,3.控件图片等显示,设置某一个背景的图片，有如下三种方法：1.background-image2.background3.border-image4.image区别：border-image：图片显示采取拉伸效果为默认缺省background-image：图片显示采取重复效果为默认缺省image：图片显示采取原图大小为默认缺省background：包含background-image1.background-image是background中的一种，background还包含其他属性，有color，repeat，position等等；2.border-image和background-image，前者是在控件的border区域进行设置，后者是整体，包括margin区域，且同时设置，前者会覆盖在后者的图片之上。3.image不会改变图片大小,传说中的九宫格：实用性很强大先给个赞！如下：了解：图片在实际的应用中，如果不使用九宫格方式，图片会进行自动复制重绘平铺显示或者进行对应比例的像素画放大，如果存在阴影等会出现阴影模糊，显示效果变差。而解决这个问题的方法就是九宫格。原理：程序自动按照所分配的像素进行四边的切割，然后保留边界的图片数据，自动将中间的数据进行像素化拉伸。使用举例：border-image:url(button.png)4444stretchstretch;/图片上右下左拉伸（缺省）拉伸（缺省）border-width：4444；/必须有,4.其他注意,1.控件命名一个界面中存在很多不同的控件，而且控件可能需要不同的效果，及时现在没有，所以在编写的过程中，尽可能的对空间进行统一命名和增加使用的作用域，以减少后期的维护时间成本。请调用setobjectname。/*ScrollBarVerticalTreeView*/QWidget#DialogCentralWidgetQTreeWidget#DialogTreeWigdetQScrollBar:verticalborder:1pxsolidtransparent;表示：设置存在于DialogCentralWidget这个widget窗口中的DialogTreeWidget树形控件中的控件QScrollBar里面的垂直滚动条的默认显示效果。,2.控件设计显示在进行控件的显示的时候，如果在其他状态中存在某个设定，如大小，宽度，应该在主状态中也进行编写，如：/*ScrollBarVerticalTreeView*/QWidget#DialogCentralWidgetQTreeWidget#DialogTreeWigdetQScroll