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

一、Qt样式表介绍

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

二、使用代码设置样式表

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

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

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

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

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

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

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

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

QPushButton{
}

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

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

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

四、盒子模型介绍

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

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

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