在CodeBolcks下wxSmith的C++编程教程——构建更复杂的窗口

0.前言

欢迎来到 wxSmith 教程页面！wxSmith 与 Code::Blocks、wxWidgets 和 C++ 编译器相结合，为您提供一种所见即所得的方式来创建具有图形用户界面 （GUI） 的应用程序。该组合形成了一个用于快速应用程序开发 （RAD） 的工具，可在 Linux、Mac OS X 和 Windows 上运行。当您工作时，您会在屏幕上看到您正在设计的表单;他们看着你，就像他们看着你的程序的用户一样。
这些教程假设您是Code::Blocks 或 wxWidgets 的初学者，事实上，它们也是学习它们的好教程；假设您对 C++ 有基本的了解，您能够看懂教程中的C++实例代码。
这套教程的其他文章可以从以下文章中找到：

在CodeBolcks下wxSmith的C++编程教程——wxSmith教程目录（序言） - lexyao - 博客园

编写这篇文章参照了Code::Blocks 用户文档中wxSmith教程的以下文章：

WxSmith tutorial: Building more complex window - Code::Blocks

在这篇文章中你将看到以下内容：

1. 关于这篇教程的说明
2. 构建骨架
3. 构建 CD 区域列表：方向、比例、扩展
4. 光盘详情区：wxFlexGridSizer、wxChoice、wxDatePickerCtrl
5. 调整窗口大小
6. 收尾工作
7. 结束语

1.关于这篇教程的说明

这篇教程中的多数内容是翻译了Code::Blocks英文版教程的内容。由于使用的wxWidgets版本不同，也做了一些修改，增加了一些内容。
如果说上一篇教程是讲述了GUI布局的基础方法，是一种演练，那么，这一篇教程可以算作实战，构建一个真正有意义的GUI程序界面。
可以这么说，你甚至可以改变一下思路：左边是书名称列表，右边是书的详细信息。不管你怎么想，都不会影响你学习这篇教程中的方法。
不再啰嗦了，下面一段文字是原版的翻译内容。

---

 

在本教程中，我们将构建一个中等复杂的表单或窗口。大部分复杂性来自于大小调整器的使用，但它们的使用是使同一程序在多个作系统上良好运行的关键。尽管当您刚接触 wxSmith 时，这个过程可能看起来很复杂，但在编写了一些应用程序之后，您可能可以轻松构建至少具有如此复杂性的资源，所以不要害怕。我几乎每天都与 wxSmith 合作；这是发现错误和获得改进想法的最佳方式。作为创造者，这就是我的工作。虽然这个过程一开始可能看起来很复杂，但我可以向您保证，您可以很快掌握它的窍门。

当我编写本教程的开头时，我也开始编写应用程序来说明它。我会边走边描述我所做的事情。我可能会犯一两个错误，或者至少忘记设置一些属性，所以窗口不会正常工作。我们将学习识别窗户某些错误行为的原因并解决问题。

我们将从一个空框架开始 - 如果您已经阅读了前面的教程，您应该能够毫无问题地创建一个。（不要忘记输入 Close（） 语句。）

我的想法是一个例子，是管理 CD-ROM 的集合。为了不让你失望，让我在一开始就说，我们将只开发程序主窗口的表单;我们不会进行任何数据库编程来使应用程序实际工作。 那么主窗口应该是什么样子呢？在窗口的左侧，我想要一个 CD-ROM 列表。当我单击其中一张时，我希望有关该 CD 的详细信息显示在窗口的右侧。所以基本上我们的窗口中有两个区域：一个是列表，另一个是从列表中选择的 CD 的详细信息。

我将使用尺寸调整器，因为应用程序应该在各种平台上运行——Linux、Mac OS X 或 MS Windows——无需任何重写，并且主窗口应该可以调整大小。也就是说，当用户更改主窗口的大小时，列表可用空间的大小应该发生变化，并且细节中项目的间距应该调整，以制作一个美观的窗口。

2.构建骨架

原版教程的作者在似乎忘记了说构建项目的名称，我们在这里确定我们的项目名称为tu03，那么生成的文件中会有一个tu03frame.wxs文件，我们的操作都是在这个文件中进行的。
从下面的截图中你应该可以看出，原作者的项目名称是Tutorial03 - CD manager。
下面的内容中提到“将边框的大小设置为 0”，是指将wxPanel组件的Border width属性改为0，这个可以在属性浏览器中修改。这个属性的默认值是5，你可以暂时不要修改，到了完成GUI布局，可以构建并运行时再修改，改成不同的数值查看效果。

---

 

在第一个教程中，我们在框架中添加了一个额外的 wxPanel，以使背景更好。让我们在这里做同样的事情：

• 首先将 wxBoxSizer 直接添加到窗口中
• 将 wxPanel 添加到该尺寸调整器中
• 将边框的大小设置为 0，使面板覆盖整个窗口。

现在我们应该得到这个结果：

 现在让我们将 wxBoxSizer 添加到面板中。该尺寸调整器将管理我们的两个主要区域。添加该 sizer 后，树结构应如下所示：

现在我们可以开始填充这两个区域 —— 每个区域中只能有一个组件 —— 但我们想要其中的几个。那么我们该怎么办？我们在每个区域放置一个尺寸调整器，然后我们可以在每个尺寸调整器中放置多个组件。在这种情况下，我通常使用 wxStaticBoxSizer，因为我们可以在其中命名区域。因此，让我们在窗口中添加两个 wxStaticBoxSizer，每个区域一个。添加第二个区域时要小心，以免将其添加到第一个区域中。要正确添加第二个尺寸标，您必须单击第一个尺寸标度周围的边框，如图所示。请记住，新项目的父级始终是完全被蓝色覆盖的项目。当您放置第二个大小调整器时，屏幕应如下所示：

 现在窗口很小，但当我们将一些组件添加到区域中时，它会发生变化。

3.构建 CD 区域列表：方向、比例、扩展

现在让我们添加一些组件项，它们将显示 CD 列表。我们可以在这里使用 wxListBox：

 该列表相当小，因此让我们使用拖动手柄将其调整为更宽更高的位置：

 这是进步，但第二个尺寸没有调整大小。这告诉我们我们没有打开它的扩展标志。为此，请单击第二个尺寸调整器并检查其 Expand 属性：

 现在我们可以更改区域的标签，因为它们现在完全可见。为此，请单击每个区域的大小调整器并更改 Label 属性：

我们希望能够添加 CD 和删除选定的 CD，因此我们将为此目的将两个按钮插入左侧区域。要添加按钮，请在“标准”选项卡上单击它，然后将其添加到大小调整器中。请注意，wxSmith 不会让我们（错误地）选择 wxListBox 作为放置按钮的位置；ListBox 不能有子项，因此 wxSmith 将尝试在其之前或之后添加新项。添加按钮后，我们会得到这样的结果：

嗯，我希望按钮位于列表下方，而不是列表旁边。wxStaticBoxSizer 按照我们告诉它的方式对齐组件；默认情况下，它将它们对齐在水平线上。要将方向更改为垂直，您可以更改 wxStaticBoxSizer 的 Orientation 属性。但在我们更改它之前，让我们再期待一件事。我希望有两个按钮而不是只有一个按钮，并且我希望它们水平对齐。由于 wxStaticBox 将更改为垂直模式，因此我们将不得不使用另一个尺寸调整器来处理按钮。因此，让我们在列表之后和按钮之前添加一个 wxBoxSizer：

 现在让我们将 wxStaticBoxSizer 的 Orientation 更改为 vertical。更改后我们得到以下结果：

我们可以看到这里有些严重不对劲。wxBoxSizer 被异常拉伸；如果我们滚动编辑器，我们可以看到按钮也是如此。我们在之前的教程中说过，wxBoxSizer 和 wxStaticBoxSizer 试图在一个方向上保持所有内容的大小相同。这正是这里发生的事情。wxStaticBoxSizer 使用最高的项目（CD 列表），并将此高度应用于所有托管项目。我们如何禁用此行为？通过将 wxBoxSizer 和 wxButton 的 Proportion 属性设置为 0。这将通知尺寸测量器不应在高度计算中使用这些项目：

 现在让我们将按钮移动到 wxBoxSizer 中 —— 您可以通过单击按钮并将其拖到调整器中来非常轻松地完成此作。之后，我们可以在第一个按钮旁边添加第二个按钮：

 现在我们可以看到列表没有设置 Expand 属性（否则它几乎与区域一样宽）。回去检查一下。

现在我想看看资源当前在应用程序中的外观。我们可以通过简单地运行它 （F9） 或按 wxSmith 编辑器右侧的预览按钮：

 （如果您运行该应用程序，您会看到有一个菜单和状态栏。在预览中，它们不会显示；wxSmith 仍然缺少一些功能。

我们的窗口看起来不错，并不完美，但让我们稍后再进行一些润色并填充 CD 详细信息区域。

4.光盘详情区：wxFlexGridSizer、wxChoice、wxDatePickerCtrl

在 CD 详细信息中，我想对 CD 进行描述：

• 类型（音乐/程序/备份/其他）
• 标题
• 艺术家/作者
• 发布日期
• 描述

对于这样的列表，我们需要某种类型的网格大小调整器。好的，但是该区域有一个 wxStaticBoxSizer，它仅将项目对齐一行。为了克服这个限制，我们可以在 wxStaticBoxSizer 中添加另一个调整器，并使用新的调整器作为网格。从两个可用的大小调整器中，我建议使用 wxFlexGridSizer（wxGridSizer 会强制所有单元格具有相同的大小，这看起来不太好，因为带有描述的行可能需要比其他行更多的空间）。因此，让我们添加新的大小调整器：

• 将 wxFlexGridSizer 添加到 wxStaticBoxSizer 中
• 检查新项的“展开”(Expand)属性
• 将 边框大小（Border Size） 设置为 0 以避免一些不需要的边框。

此处显示的数据应显示在两列中 - 第一列用于标签，第二列用于值，因此让我们将 Cols 属性更改为 2。现在是时候添加内容了。对于标签，我们将使用 wxStaticText，对于值，我们将使用不同的项目：

• wxChoice 用于类型选择
• wxTextCtrl 用于标题、艺术家/作者和描述
• wxDatePickerCtrl 用于发布日期

添加项目后，我们应该有以下视图：

 （早在 2006 年，BYO 就遇到了 wxDatePickerCtrl 的问题，不得不将其替换为 wxCalendarCtrl。到 2012 年这次修订时，已经没有问题了。单击此控件会下拉一个日历，因此该窗口看起来与 wxCalendarCtrl 给出的非常相似。其余插图是使用 wxCalendarCtrl 的 BYO。

现在，当我们构建和运行时，我们会看到这个屏幕：

 看起来我们现在有几件事要做：

• 首先是检查第一个区域的 Expand 属性（当第二个区域增加高度时它没有扩展）
• 其次是为 CD 详细信息区域中的值设置适当的标签
• 第三是检查该区域中具有值的所有项的 Expand 属性
• 四是调整CD详情区域中用于编辑值的项目

前三项任务非常简单，我把它们留给你。

第四项任务将需要一些新的东西，所以我会更好地描述它：

首先，让我们从文本框中删除单词“Text”——它是默认设置的，但默认情况下最好是空文本。可以通过修改 Text 属性来更改文本，因此您应该非常快速地完成此作。

现在我们必须设置一些值，这些值可以从标记为 Type 的 wxChoice 控件中选择。这是通过编辑 wxChoice 的 Choices 属性中的项目来完成的。在那行上，右侧有一个按钮。单击它时，将弹出一个新窗口，您可以在其中输入选项：

Music
Program
Backup
Other

 

5.调整窗口大小

我们有窗口的第一个版本。但这并不是我们工作的终点。如果我们希望它用户友好，它应该能够调整大小。我们可以通过显示预览或构建和运行应用程序来检查它。后一种路线更可靠，所以让我们使用它。当我尝试调整它的大小时，它看起来像这样：

 我们可以在这个窗口中看到两个错误的东西：

• 这些区域没有垂直扩展并保持居中
• 第二个区域的内容对调整大小没有反应

第一个问题应该是由缺少一些 Expand 属性引起的，所以让我们找到它。

首先，我们应该检查区域是否设置了 Expand 属性；是的，他们确实如此，所以这不是问题。通常在这种情况下，我们应该继续检查父项。在这种情况下，它是一个总是扩展的 wxBoxSizer。接下来是一个 wxPanel，我们用它来制作一个漂亮的背景，瞧：这个缺少 Expand 属性。因此，让我们检查一下并再次测试结果。它工作正常。

现在是第二个问题。CD details 窗格中的内容基于 wxFlexGridSizer。如果您查看上一个教程，您可能会发现此尺寸测量器具有一个称为 Growable cols 的特殊属性。使用此属性，我们可以设置应调整大小的列。我希望带有值的列增长；我们不需要更多的标签空间。因此，让我们将 Growable cols 设置为“1”（索引从 0 开始）。请注意，您可以通过查看资源树快速找到 wxFlexGridSizer —— 我们的项目中只有一个这样的大小调整器。

现在我们有了更好的结果：

 

6.收尾工作

当我看着我们的窗口时，我发现我在第一个区域中留下了一些未完成的事情。这些按钮没有新标签，而且它们和列表之间有很大的空间，所以我们现在可以更新这些东西。

像往常一样，我将把更改标签留给您 —— 这些按钮应该称为添加和删除。

现在让我们删除浪费的空间。添加空间是因为尺寸测量器内的每个项目可能都有额外的边框。默认情况下，它设置为 5 像素，因此如果我们删除按钮周围的边框，我们将有更多的可用空间。但是按钮之间将没有任何空间。

为了克服这个问题，我们可以使用另一个与边界相关的属性，也称为 Border，但通过左边距中的一个小正方形来区分。正方形中是 + 标记。通过单击 +，我们展开该行，然后可以检查我们不想要的边框。因此，如果我们删除第一个按钮的上/下/左边缘边框和第二个按钮的上/下/右边缘边框，我们会删除多余的空间，但按钮之间仍然会有一些间隙。以下是第一个按钮属性应如何选择：

到这里，我们到达了本教程的结尾。当然，我们构建的窗口不一定是最终版本。例如，我们可以添加一个列表来记录谁从我们这里借了 CD，以及何时以及谁现在拥有它。我们可以添加一些搜索等。但是本教程已经进行了足够长的时间，我将把这些升级留给你。我希望您在这里学到了一些新的、有趣的和有用的东西。

7.结束语

这篇教程的原作者讲解得很详细，把它翻译过来让大家学习，希望大家能从中获益。
能够读懂这篇教程讲解的内容，你基本上具有了使用wxSmith构建更复杂的GUI界面的能力。
教程中讲到了一些布局组件的用法，他们的功能十分强大，灵活运用才是发挥他们的长处的关键所在。