Qt样式表(4)：属性类型

Qt样式表(4)：属性类型

若对C++语法不熟悉，建议参阅《C++语法详解》一书，电子工业出版社出版，该书语法示例短小精悍，对查阅C++知识点相当方便，并对语法原理进行了透彻、深入详细的讲解，可确保读者彻底弄懂C++的原理，彻底解惑C++，知其然更知其所以然。此书是一本全面了解C++不可多得的案头必备图书。

1、各符号的含义
	|：分隔符，比如0 | 1，表示0或者1
	*：表示0或更多，
	+：表示1或更多
	?：表示0或1，比如(on | off)?，表示可取on或off之一，或一个都不取 
	{0,4}：表示0到4，比如Length{0 , 4}，表示0到4个Length的值
   示例：
①、{top | bottom | left | right | center}*    //表示可取大括号中任意值的组合，比如top left(表示左上)
②、(Font Style | Font Weight){0, 2} Font Size String
   以上语法表示，其值的格式必须按照如下顺序指定(若顺序不正确，则取值无效)：
      “Font Style或Font Weight的值之一或无，字体大小，一个字符串”，
假设Font Style属性类型可取值为italic，Font Weight属性类型可取值为一整数，Font Size属性类型可取值为一像素值，String为一字符串，则以下值是有效的取值
       italic 55px "Calibri"    	//斜体，字的大小为55像素，字体族为Calibri
       900 55px "Calibri"    	//字体粗细为900，大小为55像素，字体族为Calibri
       900 italic 55px "Calibri" 或 italic 900 55px "Calibri"   //Font Style和Font Weight的位置无关紧要
   以下为无效的取值
       900 55px italic "Calibri" 	//Font Size和Font Style的顺序不对
       55px italic "Calibri"     	//原因同上
2、Alignment			值：{top | bottom | left | right | center}*
	对齐方式，比如QPushButton{background-position:top right}   //右上角对齐
3、Url		值：url(filiename)
	其中的filename是本地磁盘或Qt资源系统的文件的名称，比如
QPushButton{background-image:url(F:/1i.png)}   //读取文件F:/1i.png作为背景图像
4、Attachment			值：{scroll | fixed}*          
	滚动或固定，属性background-attachment使用该类型，以用于QAbstractScrollArea
5、Background			值：{Brush | Url | Repeat | Alignment}*   	//参见各属性类型的取值
6、Boolean			值：0 | 1       					//布尔值，取0或1
7、Border				值：{Border Style | Length | Brush}*    	//参见各属性类型的取值
8、Border Image		值：none | Url Number{4} (stretch | repeat) {0, 2}
	该值用于指定边框图像(border-image)，注意值的格式，比如
       QPushButton{
   			border-image:url(F:/1x.png) 15 25 15 25 repeat;
        		border-width:55;}   		//指定边框图像还需设置边框宽度
9、Border Style			值：dashed | dot-dash | dot-dot-dash | dotted | double | grovve | inset|outset|ridge|solid|none
	该属性类型用于指定边界线的样式，比如dashed表示虚线，dotted表示点线等
10、Box Colors			值：Brush{1, 4}
	1到4个Brush值，分别指定盒子的top、right、bottom、left边界线，若未指定left，则将与right相同，若未指定bottom，则与top相同，若未指定正确的颜色，则与top的相同，下面为示例：
QLabel{border-color:yellow}   			//四条边界线都为黄色
QLabel{border-color:yellow red}  			//top、bottom为黄色，left和right为红色
QLabel{border-color:yellow red blue}  		//top为黄色，right和left为红色，bottom为蓝色 
QLabel{border-color:yellow red blue green}  	//top为黄色，right为红色，bottom为蓝色，left为绿色 
11、Box Lengths		值：Length{1, 4}
	1到4个Length值，分别指定盒子的top、right、bottom、left边界线，其原理与Box Colos相同。
12、Brush				值：Color | Gradient | PaletteRole
	具体可参见各属性类型的取值，注意：Brush属性类型还可指定渐变色(即Gradient属性类型)
13、Color				值：rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name
	指定颜色，从其值可看到，颜色可使用6种方式指定，其中rgb()和rgba()可取0~255之间的值，或一个百分比值，hsv()或hsva中的s和v必须是0~255之间的值，h的值是0~359之间的值，比如
           QLabel{border-color: rgba(111,11,11, 70%);
14、Font				值：(Font Style | Font Weight){0, 2} Font Size String
	字体属性，对该属性取值的讲解，参见本小节开头。
15、Font Size			值：Length       					//字体的大小
16、Font Style			值：normal | italic | oblique				//字体的样式
17、Font Weight		值：normal | bold | 100 | 200 | … | 900		//字体的重量(即粗细)
18、Length			值：Number(px | pt | em |ex )?
	数字后跟一个测量单位(比如像素)，在Qt中，必须指定测量单位，为了与早期的Qt版本兼容，大多数情况下，若未指定测量单位，则被视为像素，支持的单位如下：
	px：像素
	pt：点(即1/72英寸)
	em：字体的em宽度，即字母M的宽度
	ex：字体的ex宽度，即字母X的宽度
19、Number			值：一个10进制整数和实数，比如18, 23.46等
20、Origin			值：margin | border | padding | content
	指定盒子模型中的4个矩形，详见盒子模型原理(13.9.2节)
21、PaletteRole		
值：alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link | link-visited | mid | midlight | shadow | text | window | window-text
	该属性类型的取值对应于QPalette::ColorRole枚举。
22、Radius			值：Length{1,2}
	1到2个Length，若只指定了一个Length，则表示角的1/4圆的半径，若指定两个长度，则第一个长度是1/4椭圆的水平半径，第二个长度是垂直半径
23、Repeat			值：repeat-x | repeat-y | repeat | no-repeat
	表示重复性质(可实现图像的平铺)，其中repeat-x表示水平方向重复，repeat-y表示垂直方向重复，repeat表示水平和垂直方向重复，no-repeat表示没有重复。
24、Icon				值：(Url (disabled | active | normal | selected)?(on | off) ?) *
	指定图标(图标属性见表13-28)

25、Gradient			值：qlineargradient | qradialgradient | qconicalgradient
	指定渐变填充，其中qlineargradient表示线性渐变，qradialgradient 表示径向渐变，qconicalgradient表示圆锥渐变，渐变的原理详见第12章，下面列举几个示例

示例13.18：使用样式表设置线性渐变背景(效果见图13-33)

#include<QtWidgets>
int main(int argc, char *argv[]){    QApplication aa(argc,argv);
    QWidget w;     QPushButton *pb1=new QPushButton("AAA",&w);		pb1->move(22,22);
    pb1->resize(333,133);   //为使效果比较明显，把按钮设置得相对大一点
     aa.setStyleSheet(
        " QPushButton {""background: qlineargradient(   //设置线性渐变背景
x1:0, y1:0, x2:1, y2:1,"				//渐变范围从左上角(0,0)，到右下角(1,1)
//起点颜色为红色，中点位置颜色为黄色，终点颜色为绿色
              "stop:0 red, stop: 0.5 yellow, stop:1 green)}"  );
    w.resize(400,300);    w.show();    return aa.exec();	}

示例13.19：使用样式表设置圆锥渐变和径向渐变背景(效果见图13-34)
#include<QtWidgets>
int main(int argc, char *argv[]){    QApplication aa(argc,argv);
QWidget w;
QPushButton *pb=new QPushButton("AAA",&w);   pb->move(22,22);  pb->resize(155,133);
QPushButton *pb1=new QPushButton("BBB",&w);  pb1->move(200,22);pb1->resize(155,133);
pb->setObjectName("AAA");    pb1->setObjectName("BBB");  	//设置对象名
aa.setStyleSheet(
" QPushButton#AAA{"  								//设置按钮AAA的样式
    		"background: qconicalgradient("   				//圆锥渐变
   			"cx:0.5, cy:0.5, angle:30,"   				//指定中心点和角度
       		"stop:0 red, stop:0.5 yellow,stop:1 green)}"	//指定渐变颜色
  	" QPushButton#BBB {"  								//设置按钮BBB的样式
        	"background: qradialgradient("      				//径向渐变
        		"cx:0, cy:0, radius: 1,"   					//中心点和半径(即渐变区域)
               "fx:0.5, fy:0.5,"  						//焦点半径位置
               " stop:0 red,stop:0.5 yellow, stop:1 green)}"	//指定渐变颜色
        );
    w.resize(400,300);    w.show();    return aa.exec();	}

本文作者：黄邦勇帅(原名：黄勇)