在Qt Creator中创建“一棵树的建造”程序的框架

在Qt Creator中创建“一棵树的建造”程序的框架

　　本文演示在Qt Creator中创建项目BuildTree的程序框架的过程。在开始工作之前，读者需要先安装好Qt开发环境及工具，具体方法请参考如下链接：

http://codelearn.club/2022/03/qt_onlineinstall_win/

版权声明

本文可以在互联网上自由转载，但必须：注明出处(作者：海洋饼干叔叔)并包含指向本页面的链接。

本文不可以以纸质出版为目的进行改编、摘抄。

1. 创建项目

　　在Qt Creator中点击菜单项“文件 — 新建文件或项目”，软件将会显示如下图所示的对话框，选择Application(Qt)下的Qt Widgets Application(意为Qt窗口应用)，然后点击Choose按钮。

　　在接下来的Project Location（项目位置）对话框中，选择合适的创建路径并输入如下图所示的名称，然后点击下一步。为了避免潜在的兼容性问题，作者建议无论是项目路径还是名称，均使用纯英文，且不要包含空格或除下画线外的其他符号。

　　在接下来的Define Build System（定义构建系统）对话框中，使用默认值qmake，直接点击下一步。

　　在接下来的Class Information（类信息）对话框中，将Base class（基类）调整为QWidget，并将Class name（类名）修改为MainWidget，然后点击下一步。QWidget是Qt中表示窗口的类型。

　　在接下来的Translation File（翻译文件）对话框中什么都不做，直接点击下一步。Qt使用一种特别的方式来完成软件的国际化，它通过独立于软件的翻译数据文件来配置软件的界面语言，如果载入法语翻译数据文件，软件的界面就是法语，同理，装入简体中文翻译数据文件，软件的界面语言就是简体中文。在本例中，我们用不到这种高级特性，读者对相关内容感兴趣，请用关键字“Qt Translator”进行互联网检索。

　　在接下来的Kit Selection（成套工具选择）对话框中，选择Desktop Qt 6.2.4 MinGW 64-bit，然后点击下一步。如果读者安装的Qt版本以及编译器与作者的不同，则上述Kit名称会有差异。

　　在接下来的Project Management(项目管理)对话框中什么都不做，直接点击完成按钮。

　　然后，如下图所示的名为BuildTree的项目被创建出来，可以看到，该项目由多个文件组成。不做任何修改，然后点击左下角的运行按钮（绿色三角形）。

　　接下来，Qt Creator会对项目进行编译和构建，如果一切顺利，BuildTree项目将得以运行，得到如下图所示的主窗口，其标题为MainWidget。点击窗口右上角的关闭（X）按钮，可以结束程序的运行。

2. 使用Qt Designer修改主窗口MainWidget.ui

　　如下图所示，Qt Creator的左侧显示了一个项目结构树，其中BuildTree.pro是一个文本文本，其中描述了项目的文件构成，配置等信息。Headers子目录下包含了项目中的头文件，Sources子目录则包含项目中的cpp代码文件，Forms子目录则包含项目中的UI表单（form）, Generated Files则包含了项目在构建过程中自动生成的文件，这些文件的用途我们稍后再讨论，通常，程序员不应修改这些自动生成的文件。

　　在窗口的左下角，有一个按钮，通过它，可以展开/收起项目树。在录入代码的过程中，程序员通常会把项目结构树收起来，以便工作。

　　用鼠标左键双击Forms子目录下的mainwidget.ui，Qt Creator会打开这个文件，具体界面如下。

　　Qt Creator允许我们以即见即所得的方式来编辑用户界面，编辑的成果即为扩展名为ui的用户界面文件。在前图中，处于中央区域的是被编辑的界面的预览，A、B、C三个区域则提供了一些编辑工具，其功能列表如下。

　　上述界面中各区域的大小是可以通过鼠标拖动来改变的。对于那些受屏幕大小限制无法完整显示的内容，上述界面中均有滚动条。请读者自行操作体会。

　　首先，在Object Inspector中选中MainWidget，此时，Property Editor中将显示MainWidget的属性以供查看和修改。

　　将geometry中的宽度和高度设置为1000和800，这表示主窗口宽1000像素，高800像素。

　　将font中的字体族设为Consolas， 点大小设为14。点大小越大，窗口中的文字就越大。

　　将windowTitle修改为Tree Builder v1.0。这个属性将影响主窗口的标题。

　　此时，直接单击窗口左下角的运行按钮（绿色三角形）试运行，如果Qt Creator弹出提示框问是否保存已修改的文件，选择Save All（全部保存），在经过编译构建之后，得到如下图所示的运行界面。可以看到，窗口变大了，标题也发生了预期的改变。点击Tree Builder v1.0窗口右上角的关闭（X）按钮，返回编辑状态。

　　从Widget Box里拖一个Display Widgets/Label至窗口，可见Object Inspector中多了一个对象，该对象名为label，类型是QLabel。QLabel就是简单的文本标签，它可以显示文字。从Object Inspector中观察，可见label对象在逻辑上属于MainWidget，它是主窗口的子部件。我们可以称MainWidget是一个容器（container），它容纳的label对象，label对象的父对象为MainWidget。

　　在Property Editor中修改label的text（文字）为”Tree Builder”，alignment（对齐）方式为水平中心、垂直中心对齐。

　　此时我们会发现label太小，无法容纳我们输入的text，用鼠标左键按住其边缘，拖动调整其大小。

　　接下来，我们期望把label调整为绿底白字。在Property Editor中找到styleSheet（样式表），点击后方的…按钮，可打开”编辑样式表“对话框。选择添加颜色，依次添加background-color（背景色）和color（前景色，此处即为文字颜色），然后点确定关闭该对话框。如果需要，操作者可以反复调整配色，直至自己喜欢为止。

　　使用之前相同的办法，将label的字体设为Consolas, 点大小为16，给粗体打上勾。

　　在设计的中途，如果期望保存设计结果，可以使用文件/Save菜单项，也可以通过快捷键Ctrl+S来完成。

　　使用类似的方法，依次向窗口中添加两个QLabel，以及三个QPushButton。在Object Inspector中，我们可以看到，MainWidget包含了6个成员，名称依次为label，label_2，label_3，pushButton，pushButton_2，pushButton_3。

　　对照下述表格在Property Editor中修改label_2和label_3。

　　label_2和label_3调整后如下图所示。

　　对照下述表格在Property Editor中调整pushButton，pushButton_2和pushButton_3。

　　按钮调整完后，界面如下图所示，请注意Object Inspector当中的三个按钮的对象名称已发生了变化，与上表中的objectName一致。

　　左手按住Ctrl键不放，用鼠标左键从左至右依次点击label（“Tree Builder”），label_2（”Levels”）, pbLevels（”8”）, label_3（”Average Branches”）, pbBranches（”3”）, pbRefresh（”Refresh”），选中这几个对象。然后单击鼠标右键（注意鼠标光标应保持在其中一个对象上方），然后在弹出的菜单中选择布局/水平布局。

　　如下图所示，上述操作在MainWidget对象之下创建了一个名为horizontalLayout的对象，其类型为QHBoxLayout。这个对象是一个容器，其功能将当其全部的内部元素呈水平方向布局。如图中的Object Inspector所示，三个Label以及三个按钮都是这个水平布局的子对象，他们的父对象都是horizontalLayout。

　　预期用途说明：pbLevels按钮用于设置树的深度（层数），pbBranches按钮用于设置树枝的平均分叉数， pbRefresh按钮用于刷新界面显示，点击该按钮后，程序将创建一棵新树并显示出来。

　　从Widget Box中拖一个Layouts/Vertical Layout至窗口的如下位置，然后在Property Editor中将其layoutName改为layoutDrawer。这个layoutDrawer是一个垂直布局，预期其中将放置一个QWidget对象，这个QWidget对象将是递归分形树的描绘位置。

　　在Object Inspector中右键单击MainWidget， 然后在弹出菜单中选择布局，垂直布局。

　　上述调整之后，界面如下图所示。从Object Inspector中观察，可以看到整个MainWidget对象呈现一个树形结构。MainWidget本身呈垂直布局，MainWidget的两个直接成员horizontalLayout以及layoutDrawer表现为上下相邻关系，这是MainWidget垂直布局的结果。horizontalLayout是一个水平布局，其内的6个成员呈左右相邻关系，这是水平布局的结果。

　　如果选中一个布局对象，比如下图中的horizontalLayout，可以在Property Editor中看到布局本身也有很多属性。这些属性可以帮们我们调整布局对象之间的间距，布局的四边边距等信息，读者可以尝试改一改，体会一下这些属性的功能。看完后，记得改回去。

3. 保存并运行

　　选择File/Close “mainwidget.ui”，关闭该文件。如果提示保存文件，请选择保存。

　　回到主界面后，点击运行按钮（绿色三角形），编译构建后的运行效果如下图所示。

　　由于layoutDrawer内部没有子对象，所以horizontalLayout事实上占据了整个MainWidget， 这些标签和按钮处于窗口的竖向中心。

　　如果读者对上述布局的效果不满意，比如觉得绿色标签”Tree Builder”横向宽度不够，可以在Property Editor中调整其minimumSize/宽度等数据，对布局结果进行必要的约束。

　　Qt的界面设计功能十分强大，各种界面组件，布局十分繁杂，本例所使用到的部分比“冰山一角”还要小。不过好歹抛转引玉，我们开了个头。