Qt样式表使用说明

嗯Qt样式使用说明一、声明：1．文档说明：学习Qt样式表前提：如果你了解CSS，那么我相信这对你来说会很容易理解并应用于实际界面美化，它与CSS有些相似之处，当然如果同时也了解Qt，那么你会很快学会如何运用Qt样式为程序设计出漂亮的界面。阅读本说明文档：首先一、阅读声明，二、名词解释，三、语法简介，六、附属例题解释，每次实验并对照着五、样式表参照表，体会并学习如何运用样式表里关键词。样式表参照表之间的关系很复杂：很多需要重复描述的选择器、属性、值，但由于本文档不能跳转，所以要自己去查找，按照它语法关系层层迭代定位表格，并按照字母表顺序定位要查找内容的大概范围。这里的表格以Qthelp文档为准。暂不介绍：为了尽快完成本文档的初步可使用的目的，很多在本程序中暂时用不到的窗口部件暂未解释介绍，窗口部件介绍表格中会提到“暂不介绍”，但是辅助控制器，属性，值都是完全展示在表格中。附加的例题格式说明：例子是经过实验得出的结论，用C语言的注释方式添加到相应的样式代码后面，当然你的文件(.CSS)同样满足这个注释方式。/*注释内容*//*imagesForExample:example_for_XXX000.png*/实例图片如何做实验：Qt源码bin目录下的designer.exe,运行/拖入控件/右键/改变样式表/应用；QtCreator也可以。遇到问题请尽快联系作者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.盒模型（TheBoxModel）这个模式指定了4个影响布局的矩形，从而绘制一个自定义的窗口部件。1.Contentrectangle是最里面的矩形，它绘制窗口部件内容（如文字，图片）的地方。2.paddingrectangle包围contentrectangle。它负责由padding属性指定填充操作。主要是窗口部件内容与边缘线(border)之间的空隙，它可以用top，right，bottom和left设置它的大小。3.borderrectangle包围paddingrectangle。它为边界预留空间。可以认为是窗口的外框线。下面讲的分割图形的方法中把border当做是一个区域来理解的。参考四、高级应用：九宫格分割法4.marginrectangle最外面的矩形，他包围borderrectangle，负责指定的边缘空白区域，主要是负责与其他的窗口部件的距离。如果没有指定他们四个，则默认是四个重合在一起的。如图：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.可以应用样式表的窗口部件。3.之后就查看你所要应对的选择器里的部分进行设置，就要再去查看辅助控制器。4.再分的细一点，搞清楚一个窗口部件分为几个状态，鼠标划入，点击，关闭...他们决定了你所要设置状态的属性设置。5.定位了前面的，就要改变他的特性了，也就是进行属性设置，查找属性表，对应属性表超找对应的值表，也有可能还要通过值表的迭代（值的值还需要一个方式表达。）最终知道这个值是数字，还是一个颜色，或者是一个bool类型，抑或是其他的关键词(如padding、content...)。仔细阅读他们之间的关系。2.遇到问题也许你已经组合了很多的样式表，但是有时候你会发现，有时候有些属性值不起作用，或者说图像变形，并不是你所要看到的效果，不要着急。1.查看一下你的语法是否正确，如果你保证确保无误的话，那么就想一想，是否是在构建这个窗口控件之前进行设置的，这个会影响到你的属性是否被读入。参考六、附属例题解释：32.定制QTool查看是否被其他的属性覆盖。当一个属性被具有同一选择器的几个规则设置时，那么只有最后一个规则起作用（这是一个难点）。2.查看是否有相应的关联的属性已被设为bool=1。3.图片无法显示：查看路径是否正确在Qt中是”/”代替window下的”\”,使用相对路径，本应用程序的相对路径（是相应程序读取这个样式css文件），当然你也可以写绝对路径的方式读取图片，但是路径这个方法是不提倡的。4.大小变化的窗口控件是否背景图片选择了border-image。详细参考四、高级应用与六、附属例题解释：34.QPushButton与image四、高级应用：1.九宫格分割法：之所以叫做九宫格分割法是源于，把边界图分为3X3的小格，当填充窗口部件时如图A，4个角保持不变，如图B,ABCDEFGHTA：原始图ABCDEFCHTB：结果图其他的5个格子被拉伸或者平铺填充可用的空间。使用border-image属性可以指定各个边界图，他要求指定一个图像文件名和定义9个格子的4条“切线”。切线用到上、右、下和左边缘的距离定义。Border.png作为边界图，距离上、右、下和左的切线为4、8、12和16应该如下定义：border-image：url（boder.png）481216;但使用边界图时，必须显示地设置border-image属性。一般情况下，border-width应该与切线的位置一致；否则，为了与border-width相符合，角上的格子将被拉伸或者缩短。对border.png应该这样设置指定他的四个边框的宽度：border-width:4px8px12px16px;这样才能把刚才切割的四个角的图片完全的放置到border中当做border区域的背景。2.渐变器Qt支持三种渐变器查看例题5.渐变器1.线性渐变（qlineargradient）：连接这两点的线上有一系列的颜色断点。两个控制点之间的不同位置指定不同的颜色。位置用0和1之间的浮点数来确定，0对应着第一个控制点，1对应着第二个控制点。两个指定断点之间的颜色由线性插值得出。2.辐射渐变（qradialgradient）：有一个中心点（xn，yn），半径r，一个焦点（xf，yf）以及颜色断点定义。中心点和半径定义一个圆。颜色从焦点向外扩散，焦点可以是中心点或者圆内的其它点。3.梯形渐变（qconicalgradient）：由一个中心点（xn，yn）和一个角度a定义。颜色在中心点周围像钟表的秒针扫过一样扩散。五、样式表参照表：1.样式选择器类型表选择器实例可以匹配的窗口部件全局对象*对全局的任意窗口部件类型QDial给定类的实例，包括这个类的子类类.QDial给定类的实例，不包括子类标识QDial#ageDial给定对象名称的窗口(ageDial表示对象的名字，在代码中可知)Qt属