Qt样式表之一：Qt样式表和盒子模型介绍

一、Qt样式表介绍

Qt样式表是一个可以自定义部件外观的十分强大的机制，可以用来美化部件。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表（Cascading Style Sheets, CSS)的启发，不过与CSS不同的是，Qt样式表应用于部件的世界。

二、使用代码设置样式表

样式表使用文本描述，可以使用 QApplication:: setStyleSheet() 函数将其设置到整个应用程序上，也可以使用 QWidget::setStyleSheet() 函数将其设置到一个指定的部件（还有它的子部件）上。如果在不同的级别都设置了样式表，那么Qt会使用所有有效的样式表，这被称为样式表的层叠。下面来看一个简单的例子。

新建Qt Gui应用，项目名称为myStyleSheets，类名为MainWindow，基类保持QMainWindow不变。建立好项目后进入设计模式，向界面上拖入一个PushButton和一个Horizontal Slider，然后在mainwindow.cpp文件中的构造函数里添加如下代码：

//设置pushButton的背景颜色为黄色
ui->pushButton->setStyleSheet("background:yellow");
//设置horizontalSlider的背贵为蓝色
ui->horizontalSlider->setStyleSheet("background:blue");

这样便设置了两个部件的背景色。不过像这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表，如果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设置样式表。因为这里两个部件都在MainWindow上，所以可以为MainWindow设置样式表。先注释掉上面的两行代码，然后添加如下代码：

this->setStyleSheet("background:blue");

这样，以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都会改为这里指定的颜色。

三、在设计模式中设置样式表

除了使用代码来设置样式表外，也可以在设计模式中为添加到界面上的部件设置样式表，这样更加直观。先注释掉上面添加的代码，然后进入设计模式。在界面上右击，在弹出的菜单中选择“改变样式表”，这时会出现编辑样式表对话框，在其中输入如下代码：

QPushButton{
}

注意光标留在第一个大括号后。然后单击上面“添加颜色”选项后面的下拉箭头， 在弹出的列表中选择“background-color”一项。这时会弹出选择颜色对话框，随便选择一个颜色，然后单击“确定按钮”，这时会自动添加代码：

QPushButton{
	background-color: rgb(0, 0, 255);
}

可以看到，在这里设置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使用渐变颜色或者更改字体。在设计模式，有时无法正常显示设置好的样式表效果，不过运行程序后会正常显示的。这里是在MainWindow界面上设置了样式表，当然，也可以按照这种方法在指定的部件上添加样式表。

四、盒子模型介绍

使用Style Sheets时,所有的部件都被视为有四个同心矩形的盒子(box)：边缘矩形(margin rectangle)，边框矩形(border rectangle)，填充矩形(padding rectangle)和内容矩形(content rectangle)。盒子模型对四个矩形有详细的描述，如下图所示：

边缘，边框宽度和填充属性默认为0。这样四个矩形(margin, border, padding和content)重合。

使用background-image属性，你可以为部件指定背景图片。默认地，背景图片只画在边框以内。背景图片不随部件大小改变而改变。提供一个随部件大小改变而改变的背景或皮肤，必须使用border-image。因为border-image属性提供了一个备选背景，所以并不需要再为部件指定一个背景图片。在两者都指定的情况下，border-image将画于background-image之上。