Qt5烹饪书学习 002

基本样式表定制

在前面的示例中，我们学习了如何用Qt设计器将样式表应用到一个控件上。让我们更进一步，创建一些其他类型的控件，为了学习的目的，改变它们的风格属性，使他们风格迥异。

但是这次，我们不会一个接一个地将样式应用于每个小部件，我们将学习将样式表应用到主窗体，并让床体内的控件按照层次结构继承样式，这有利于长期开发的管理和维护。

How to do it…

1. 首先，让我们从上一次完成的内容开始，将按钮中已配置完成的样式表删除。选中按钮并在属性框中找到样式表属性（stylesheet），单击属性值后你可以在其旁边看到两个按钮。单击右边的小箭头，这个按钮将恢复属性为默认值，在本例中默认值即为空，之前配置的样式表被删除。

2. 然后，通过从控件框中逐一拖动控件到窗体中，向UI添加一些控件。我添加了一个输入框（line edit），组合框（combo box，具有下拉菜单的输入框），水平滑块（horizontal slider，注意不是滚动条，滚动条英文为scroller），单选按钮（radio button），还有一个复选框（check box）。

3. 为了精简性，我们从窗体中删除菜单栏、主工具栏和状态栏。你可以从对象查看器（object inspector）中选中它们，右键打开快捷菜单，然后点击“移除”（Remove）。（下图是对象查看器）

现在你的UI应该类似于这样：

4. 从窗体编辑器或对象查看器中选择主窗体，然后右键单击并选择“改变样式表...”打开“编辑样式表”窗口。

插入以下样式表：

5. 点击“Apply”，你会看到一个风格迥异的UI，窗体里面所有控件都变成了黄色，还有了粗边框。

这是因为前面的样式表没有选择器（selector），这意味着样式将被应用到主窗口以及它的子控件，并一直按照等级关系向下继承。要改变这一现状，让我们尝试一些不同的东西：

6. 这一次，只有按钮（PushButton）将获得前面代码中所描述的样式，所有其他控件都将返回到默认样式。你可以试着再加几个按钮（PushButton）到你的用户界面，他们都将看起来相同：

7. 之所以出现这种情况，是因为我们特意使用选择器，将样式应用到所有类名为QPushButton的控件。我们也可以把样式应用到单独一个按钮上，秩序在样式表中提到它的名称，就像这样：

8. 一旦你了解了这个方法，我们可以将下面的代码添加到样式表

9. 它所做的基本上是在改变所有按钮的样式的基础上同时设置名为pushbutton_2的按钮的属性。我们还保留了pushbutton_3的样式表。现在所有的按钮看起来像这样：

10. 样式表的第一部分将改变所有QPushButton类控件的属性，将它们设置为白色方框，无边框，拥有红色文本的按钮。样式表的第二部分只改变了pushbutton_2的边框属性（border）。你会注意到pushbutton_2的背景颜色和文本颜色依然是白色和红色，这是因为我们没有在样式表的第二部分内容中重写（override，意为覆盖，如果你不了解类的机制你可以这么理解）这些属性值，因此将直接使用第一部分样式表中描述的样式，因为它适用于所有的QPushButton控件。务必注意，pushbutton_3的文本也已更改为了红色，因为我们没有在第三部分样式表描述它的颜色属性。

11. 之后，我们使用通用选择器（使用符号*代替类名）创建另外的样式，如下所示（红框部分，注意因为版本问题原书此处代码Apply无效，译者按照相同格式手动使用菜单添加背景渐变色发现qradialgradient函数参数内容与原书有所不同）：

12。通用选择器会影响所有的控件并无视它们的类型。因此，前面的样式表将为所有小部件的背景应用一个漂亮的渐变色，同时将它们的文本设为白色，并给它们一个像素宽度的实线白色轮廓。

我们可以使用颜色的名称（也就是white），RGB函数（RGB（255, 255, 255））或十六进制码（# ffffff）来描述颜色值。

13。正如前面一样，前面的样式表不会影响按钮，因为我们已经给了他们自己的风格，将覆盖一般风格描述在通用选择器中。请记住，在Qt中，更具体的样式将最终使用时，有一个以上的样式有一个小部件的影响。这用户界面现在看起来如何：

How it works...

如果您曾经使用HTML和CSS参与Web开发，你会发现Qt样式表的工作方式和CSS完全一样。样式表提供用于描述控件外观的声明——控件组中每个元素的颜色是什么，边框的宽度应该是多少，等等。

如果你将特定控件的名称指定到样式表，这将更改指定控件的样式，而别的控件不会受到影响，它们将继续按照默认样式保持原样。

如果你要更改控件的名称，请从窗体编辑器或对象查看器中选选中控件。在属性窗口中找到objectName并修改它的值。如果你在之前使用过ID选择器（这里的ID Selector指的就是在样式表中使用：类型名称 + # + objectName + {“样式”}指定了某个具体控件，ID指的就是控件的objectName）来更改该控件的样式，更改其对象名会破坏原有的样式表并使风格失效。要解决这个问题，只需同时更改该对象在样式表中的名称就可以了。

推文原稿：信息部 王鹏

校稿，图文：信息部 陈逸峰