Qt5烹饪书学习 001

前注：教程内容模块依据qt5_cpp gui_programming cookbook英文书划分，使用最新的Qt5.9.4版本实际环境测试。文章内容部分为原书机翻加手工调整。

外观定制：在Qt设计器中使用QSS

Qt Creator是跨平台的 Qt IDE（Integrated Development Environment，集成开发环境），Qt Creator是 Qt 被 Nokia 收购后推出的一款新的轻量级集成开发环境（IDE）。此 IDE 能够跨平台运行，支持的系统包括 Linux（32 位及 64 位）、Mac OS X 以及 Windows。根据官方描述，Qt Creator 的设计目标是使开发人员能够利用 Qt 这个应用程序框架更加快速及轻易的完成开发任务。

Qt（准确来说是Qt Creator）允许我们通过一种大多用户熟悉的方法来设计程序的用户界面。Qt不仅为我们提供了强大的用户界面工具包——Qt设计器，它使我们能够设计我们的用户界面而不需要编写一行代码，而且它也允许高级用户自定义其用户界面组件，通过一种叫做Qt样式表（Qt Style Sheets）的简单脚本语言。

完全没有绘制用户界面经验的同学们请仔细看这部分内容。新建工程我们选择的是Qt Widgets Application：

创建project之后你可以在Qt的项目文件列表里面看到一个.pro(project)文件和三个文件夹，这三个文件夹是虚拟的，只是用来区分各类文件用的。我们可以双击任意文件以打开文件，或将层级视图的各文件夹展开进行查看和编辑操作。*.pro文件主要用于整个工程的配置，包括包含资源以及各种附带选项。另外四个默认创建的文件分别是main.cpp文件，用于仿效C标准的主函数，（甚至主函数的参数都和MSVC里的控制台程序main函数相同，你可以方便的为自己的程序配置命令行参数），函数里构造对象的操作暂时只需理解即可；mainwindow.h和mainwindow.cpp文件，声明了一个继承QMainWindow的子类MainWindow并在第二个文件中加入了类成员函数的代码。（这是我们构建类的一个惯用操作，你不能将类成员函数代码直接写在头文件中，头文件中只能有宏和声明那类东西，除非你使用的是hpp文件，那暂时超出了我们的范围）；最后一个是.ui文件，储存了窗体和各控件的外观信息。

我们现在双击ui文件将其在Qt Creator内打开（如果在IDE中央你没有看到一个可设计的无边框窗体的话），IDE最左侧的模式选择面板（Mode Selector panel）自动切换到了“设计”模式，应该注意到编辑代码时我们用的是“编辑”模式。现在你可以把较左侧的控件框里的任一控件，比如一个Push Button，拖拽到窗体内以在窗体上创建一个按钮。然后你可以在IDE右上角的“对象-类表”看到新对象的建立，右下角你也可以修改其各种属性，本讲的重点，颜色和样式的修改也在里面，你可以在里面找到名为styleSheet的一个项（在整个列表的中间部分）在右侧输入框找到省略号按钮然后单击以弹出样式表编辑器进行编辑。另一个打开样式表编辑器的方法是右击控件，在弹出菜单中选择“改变样式表...”（Change Style Sheet）。以下是一个打开的样式表编辑器。

一般来说我们初期做设计直接使用编辑器上方的几个按钮来完成样式编辑而完全不用手写样式代码。以下举个例子，注意单击按钮的时候一定要单击右边的下拉箭头部分，单击文字会生成不完整代码。我们编辑一个按钮的样式表，如图修改颜色（color属性）：

在颜色选择器里选择纯红色并确定之后IDE会自动为我们生成代码。

想要了解QSS（Qt StyleSheet）的各种属性内容和基本语法的同学可以浏览下列网页：

1. http://doc.qt.io/qt-5/stylesheet-reference.html

2. http://doc.qt.io/qt-5/stylesheet-syntax.html

其中第一个网页可以直接单击样式表编辑器里的help按钮直接跳转，不同Qt版本的网页几乎相同。QSS可以直接制作成文件然后在代码里面直接读取文本文件然后应用样式。关于语法你现在唯一需要知道的是，每一个样式属性（Property）创建完之后都以分号结束，因此你要修改样式属性，需要把想要删除的属性赋值连同后面的分号一起删除然后再继续添加，以防止属性之间的冲突。StyleSheet内容编辑完成后你可以单击apply直接看到样式的改变（似乎某一些样式apply无效，你必须编译工程并运行才能查看）。编辑完成单击ok保存，然后你会发现ui文件的文本内容发生了改变。

可以看到ui文件的标记语言中添加了关于stylesheet的信息（标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码）。可以猜到我们的ui文件在编译时会被解析然后编译成宿主机可以识别的内容，以跨频台展示我们的用户界面。

在英文书第一章第一节（Use style sheets with Qt Designer）的最后说到了Qt StyleSheet支持CSS2的格式并给上了链接，实际上我们只要参考上文内容中的第二个网络连接就可以得到想要的内容，以及规则冲突，样式表层叠，样式表继承和优先级关系。

图文写作，编辑：信息部 陈逸峰