Qt样式表(1)：Qt样式表基础

Qt样式表(1)：Qt样式表基础

本文为原创文章，转载请注明出处，或注明转载自“黄邦勇帅(原名：黄勇)

本文出自本人原创著作《Qt5.10 GUI完全参考手册》网盘地址：
https://pan.baidu.com/s/1iqagt4SEC8PUYx6t3ku39Q
《C++语法详解》网盘地址：https://pan.baidu.com/s/1dIxLMN5b91zpJN2sZv1MNg

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

Qt样式表是另外一种自定义部件外观的机制。Qt样式表的术语、语法几乎与层叠样式表CSS(Cascading Style Sheets)相同，若已熟悉CSS，则可快速阅读本小节及其之后的内容。
使用样式表与调色板(QPalette)相比，样式表更强大，因为使用调色板设置的外观，并不能保证在所有的样式中都可正常的工作，但样式表就不受这样的限制。而且使用样式表可以更方便的设置界面的外观，而不用去子类化QStyle类
注意：子类化QStyle类的样式目前不支持样式表。这个问题将在以后解决。
可使用QApplication::setStyleSheet()函数设置整个应用程序的样式表，使用QWidget::setStyleSheet()设置部件及其子部件的样式表，这两个函数的原型如下：

示例13.10：样式表的简单使用(效果见图13-24)
#include<QtWidgets>
int main(int argc, char *argv[]){
    QApplication aa(argc,argv);
    QWidget w;
    QPushButton *pb1=new QPushButton("AAA",&w); 	pb1->move(22,22);
    QPushButton *pb2=new QPushButton("BBB",&w); 	pb2->move(99,22);
    QCheckBox *pc=new QCheckBox("CCC",&w); 		pc->move(22,55);
QCheckBox *pc1=new QCheckBox("DDD",&w); 		pc1->move(99,55);
	//设置复选按钮pc1的背景色为黄色，复选按钮pc不受影响，注意：函数中的字符串为样式表的语法
    pc1->setStyleSheet("background-color:rgb(111,111,1)");
	//设置整个应用程序的按钮的背景色都为红色
    aa.setStyleSheet("QPushButton{background-color:red}");
    w.resize(444,333);    w.show();    return aa.exec();  }

13.8.2 样式表语法基础
Qt样式表通常不区分大小写，除了类名、对象名和Qt属性名称之外。
样式表基本语法规则如下
①、样式表由选择器(selector)和声明(declaration)两部分组成，选择器指定了受影响的部件，声明指定了要设置的属性(注意与Qt属性的区别)。比如

QPushButton { color : blue}

其中QPushButton是选择器，{color: blue}是声明，color是需要设置的属性，blue是属性的值。以上语句表明，QPushButton及其子类应使用blue(蓝色)作为其前景色。
②、可为相同的声明指定多个选择器，选择器之间使用逗号“,”进行分隔，比如

QPushButton, QCheckBox, QLineEdit{color: red}
与以下3条语句相同
QPushButton{color: red}    QCheckBox,{color: red}    QLineEdit{color: red}

③、指定多个属性时使用分号分隔，比如

QPushButton{color: red; background-color:blue}   //按钮前景色为红色，背景色为蓝色

④、为含有多个值的属性指定多个值时使用空隔分隔，比如

QLineEdit{border: 2px solid red}   //表示边框线为2像素宽的实现，其颜色为红色
      以上语句的属性border是一种对属性的简写方法，以上语句相当于以下3条语句：
      		QLineEdit{ border-width: 2px; 
			border-style:solid; 
		 	border-color:red }

⑤、若直接在部件上设置样式表，可忽略选择器及大括号，比如

QPushButton *pb1=new QPushButton ("BBB",&w);
 			//设置按钮的背景色，省略了选择器(即QPushButton)和大括号
   			pb1->setStyleSheet("background-color:yellow"); 

13.8.3 选择器

表13-23为样式表的选择器

示例13.11：样式表选择器
QApplication aa(argc,argv);
QWidget w; 
QPushButton *pb1=new QPushButton("AAA",&w);	pb1->move(22,22); pb1->resize(111,33);
QPushButton *pb2=new QPushButton("BBB",&w); 	pb2->move(199,22);
w.setObjectName("www");   pb1->setObjectName("AAA");   //设置对象名
/*以下语句将把按钮AAA的背景色设置为红色，表示把对象名为www的QWidget的直接子部件QPushButton的背景色设置为红色，其中QPushButton的对象名为AAA，其x属性和y属性(即QPushButton的位置)的值都为22*/
aa.setStyleSheet("QWidget#www > QPushButton#AAA[x=\"22\"][y=\"22\"]{background-color:red}");

示例13.12：动态属性的使用
QApplication aa(argc,argv);
    QWidget w;
    QPushButton *pb1=new QPushButton("AAA",&w);    pb1->move(22,22); pb1->resize(111,33);
    QPushButton *pb2=new QPushButton("BBB",&w); 	pb2->move(199,22);
    QCheckBox *pc=new QCheckBox("CCC",&w); 		pc->move(22,55);
    QCheckBox *pc1=new QCheckBox("DDD",&w); 		pc1->move(99,55);
pb1->setProperty("XXX",true);    				pc1->setProperty("XXX",true); 	//设置动态属性
//以下语句将把按钮pb1和pc1的背景色设置为红色，以下语句表示匹配所有属性"XXX = true"的部件
    aa.setStyleSheet("*[XXX=true]{background-color:red}");

13.8.4 子控件

复杂控件通常包含一系列子控件，比如QComboBox的下拉按钮就是子控件，还有QSpinBox的向上/向下箭头等。对复杂控件使用样式表设置外观可能需要访问其子控件。样子表中子控件以“::”符号开头。表13-24为样式表的子控件

13.8.5 伪状态

部件含有一系列的状态，样式表的状态使用“:”符号开头。比如

QPushButton:hover{…}    //表示鼠标悬停在按钮上

伪状态(见表13-25)的规则如下：
①、用感叹号可否定伪状态，比如

QPushButton:!hover{…}    //表示鼠标未悬停在按钮上

②、多个伪状态连用可达到逻辑与(AND)的效果，比如

QCheckBox:hover:checked{…}    //表示鼠标悬停在按钮上且被选中

③、多个伪状态之间使用逗号分隔可表示逻辑或(OR)的效果，比如

QCheckBox:hover, QCheckBox:checked{…} //表示鼠标悬停在按钮上或被选中，注意语法的写法

④、伪状态还可与子控件联合使用，比如

QComboBox::drop-down:hover{…}

13.9、样式表的属性

注：类型为属性可取值的“属性类型”(注意：不是Qt类型，属性类型及可取值见13.9.6节)
本小节把border也翻译为边框，因此需注意与frame(边框)的区别，可把border译为边界

13.9.1 与背景色、前景色、所选文本颜色相关的属性(见表13-26)

示例13.13：使用样式表设置部件的背景色(效果见图13-25)
#include<QtWidgets>
int main(int argc, char *argv[]){    QApplication aa(argc,argv);
    		QWidget w;
   		aa.setStyleSheet(
		//背景色为红色，背景图片为1i.png。注意为属性指定多个值的方法
      	"QWidget{background: red url(F:/1i.png);"  
      	"background-repeat: repeat-y;"        	//在y轴方向重复图片
      	"background-position: right;}");      	//图片位于部件右侧
    		w.resize(300,200);    w.show();    return aa.exec();		}

13.9.2 盒子模型原理及相关属性(见下一篇文章)

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