QT5 QSS

设计Qt程序Ui的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟代码层分开，利于维护。

过程如下：

1、建立文本文件，写入样式表内容，更改文件后缀名为qss；

2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；

3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

使用：

MainWidget::MainWidget(QWidget *parent) :

  QWidget(parent),

  ui(new Ui::MainWidget)

{

　　//应用样式 apply the qss style

  QFile file(":/qss/main.qss");

  file.open(QFile::ReadOnly);

  QTextStream filetext(&file);

  QString stylesheet = filetext.readAll();

  this->setStyleSheet(stylesheet);

 　file.close();

}

该段代码写在ui界面的后台cpp文件的构造函数中,主要是this->setStyleSheet()函数的设置功能，要说明的是该函数除了可以对整个当前构造数所在的那个类所表示的ui进行整体应用样式以外，setStyleSheet()函数本身是QWidget的成员函数，几乎Qt中的大多数控件都可以直接使用该函数分别设置自己的样式。

 

 

QSS语法

QSS的语法规则几乎与CSS相同。一条QSS的样式是由两部分组成的，一部分是选择器指定了哪些控件会受到影响，另一部分是指定了属性的值，表示这些控件的哪些属性会受到影响。例如： QPushButton { color: red }

 

 

QSS选择器类型

1.通配选择器：*  ; 匹配　　所有的控件
2.类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
3.属性选择器：QPushButton[flat="false"]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
4.类选择器：  .QPushButton ;  匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号
5.ID选择器：  #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值
6.后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
7.子选择器：  QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

另外上面所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，这点与CSS一样，例如#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。#mytable  QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

想了解更详细的=》http://www.cnblogs.com/wangqiguo/p/4960776.html

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

cpp文件下的按钮区分，设置对象名字

button=new QPushButton(this);
button->setText(tr("按钮一号"));
button->setObjectName("nameOne");//给按钮一号设置一个ID值
button2=new QPushButton(this);
button2->setText("按钮二号");
button2->setObjectName("nameTwo");//给按钮二号设置一个ID值

QSS文件里设置属性
QPushButton#nameOne{color:yellow;background-image:url(":/green.jpg")}
QPushButton#nameTwo{border:2px groove gray;border-radius:10px;padding:2px 4px;}