wxSmith wxWidgets GUI 编程简介

引言

wxWidgets 是一个用于 C++ 跨平台 GUI 开发的框架。该框架于 1992 年由 Julian Smart 在爱丁堡大学人工智能应用研究所启动，此后已被移植到许多平台。

本文旨在指导初学者安装所需的资源，并使用 Code::Blocks 作为 IDE，通过 wxWidgets 开发一个简单的应用程序。

什么是 wxWidgets

wxWidgets 是一组 C++ 库，构成了一个用于多平台 GUI 开发的框架。它提供了一个非常类似于 MFC API 的易于使用的 API。将其与适当的库和编译器链接，可以使您的应用程序看起来适合目标平台。wxWidgets 是一个非常完整的框架，几乎提供了您所需的一切解决方案，同时保持了使用的简便性。

为什么选择 wxWidgets

有许多可供选择的跨平台 GUI 开发选项。也许最流行的之一是 Java，但对于某些应用程序而言，它不是一个高效的选择。在 C++ 中，有 QT，这是一个很棒的框架，但有一些缺点必须首先提及：它模仿平台的外观，而 wxWidgets 使用平台库来创建图形界面；其次，QT 采用不同的方法，在您编写的代码和最终编译的 C++ 代码之间使用专有层。更不用说仅适用于 Windows 的 Microsoft Visual 系列框架，或者像 mono.net 这样添加了层层封装的框架。

与这些示例相反，wxWidgets 是 C++，因此具有这种效率，并且不会在您的代码中添加任何额外的层。它是一组库，因此您可以使用任何想要的 C++ 编译器进行编译，嗯，不是所有 C++ 编译器，而是最常见的。

其他优点和特点

• 它仍在开发中，并得到了开源社区的大力支持和协作。
• 它完全免费供个人和商业使用。
• 拥有大量的在线文档。
• 易于学习。它就是 C++。
• 提供了大量现成的类和库。请在此处查看：这里。

入门

言归正传。首先，我们需要框架本身和一个 IDE 来帮助我们进行开发。然后，我们将能够进行一些神奇的操作，并在屏幕上显示一个“Hello World”窗口。

Install

我将展示 Windows 上的安装步骤，但对于其他操作系统来说，步骤非常相似。我选择 Code::Blocks IDE 是因为它与 wxWidgets 的集成，并且因为它免费且有稳定的 Windows 和 Linux 版本。

1. 下载和安装 Code::Blocks

您可以从其 网页 下载 Code::Blocks 的二进制发行版。我建议下载最新的稳定 mingw 版本，目前是 codeblocks-13.12mingw-setup，它自带 mingw 编译器。只需下载安装程序，然后像经典的 Windows 程序一样安装它。您可能需要将 mingw/bin 目录的路径添加到 PATH 环境变量中。如果有人在此遇到任何问题，我可以提供更多信息。

2. 下载、安装和编译 wxWidgets

您可以从其存储库下载 wxWidgets 资源。下载 wxMSW 安装程序或 ZIP 文件，因为安装程序只是一个压缩文件夹。下载稳定的3.0.1 版本，因为它是 Windows 7 推荐的最后一个稳定版本。

下载安装程序或 ZIP 文件后，将其安装/解压缩到 C:\。打开一个命令窗口，即 Windows 中的标准控制台，然后切换到 wxWidget 构建目录

关键在于使用您稍后开发时将要使用的相同编译器来编译 wxWidgets。如果您已安装带有 mingw 的 C::B IDE，并将路径添加到环境变量中，您将不会遇到任何问题。

cd <wxwidgets>\build\msw

其中 <wxwidgets> 是您解压缩源文件的路径（通常是 C:\wxWidgets-3.0.1）。

在那里您必须执行构建命令，对于 gcc 编译器，它将如下所示：

mingw32-make -f makefile.gcc BUILD=release SHARED=1 MONOLITHIC=1 UNICODE=1 CXXFLAGS=-fno-keep-inline-dllexport

花点时间查看编译变量，以便您可以选择适合您的变量。

BUILD：wxWidget 的构建类型。在大多数情况下，您将使用“release”，因为您不会调试 wxWidgets 本身。您可以链接到 wxWidgets 的 release 版本来调试您自己的程序。

SHARED：此变量定义链接类型：动态链接（SHARED=1），您必须与您的可执行文件共享所需的 DLL，或者静态链接（SHARED=0），因此您只需要共享可执行文件。通过动态构建生成的可执行文件尺寸较小，但您需要在 PC 上安装所需的 DLL 才能运行它。

MONOLITHIC：控制是构建单个 DLL（MONOLITHIC=1）还是多个 DLL（MONOLITHIC=0）。通过 Monolithic 构建，开发更加容易，您只需要与可执行文件共享一个库，但通过多文件构建，链接过程更有效，因为您可以避免链接整个 wxWidget 代码库。

UNICODE：定义 wxWidget 和您的程序是使用宽字符字符串（UNICODE=1）还是 ANSI（UNICODE=0）。强烈建议使用 wxWidget _("string") 和 _T("string") 宏来确保您的硬编码字符串格式正确。

现在我们已经构建了 wxWidgets，可以开始开发一些基于框架的程序了。

创建项目

1. 首先启动 Code::Blocks 并选择新建项目。

2. 在项目选择窗口中，选择wxWidget。

3. 现在您必须选择 wxWidgets 版本。请确保选择您已安装的版本。如果您遵循这些说明，请选择3.0.x。

4. 接下来会出现命名项目窗口。在这里输入项目名称和项目位置。我很有创意，将其命名为 HelloWorld。

5. 现在您必须选择 GUI 构建器，即帮助您以图形方式创建图形界面的工具。我们将使用xwSmith。应用程序类型，选择基于框架。

6. 接下来出现的窗口要求您选择 wxWidgets 在您计算机上的位置。最佳选择是保留全局变量。当您单击“下一步”时，将出现全局变量菜单，您需要在base字段中输入 wxWidgets 路径。然后，如果您更改 wxWidgets 的位置，可以从 Code::Blocks 配置中编辑全局变量。

7. 选择编译器。只需将其保留为默认值（GCC 编译器）。

8. 现在我们有一些配置选项。在第一个部分中，您必须将这些选项与构建 wxWidgets 时使用的选项相匹配。

使用 wxWidgets DLL，如果您使用 SHARED=1 构建，请勾选此项。

wxWidgets 构建为单体库，如果您使用 MONOLITHIC=1 构建，请勾选此项。

启用 unicode，如果您使用 UNICODE=1 构建，请勾选此项。

例如，在截图的示例中，我未勾选使用 wxWidgets DLL，因为我使用 SHARED=0 构建了 wxWidgets。

并勾选“高级选项”。

9. 最后，最后一个窗口，将使用 __WXDEBUG__ 和 Debug wxWidgets lib 选项保持未勾选状态。

当您按下“完成”按钮时，很可能会出现一个对话框，提示没有调试版本，请单击“接受”。您可以链接到 release wxWidget 构建进行调试，而不会有任何问题。

10. 好了，我们现在在开发窗口前面了。它看起来应该像这样。

为我们的窗口添加一些内容

如果您按下“构建并运行”按钮（带有齿轮和三角形（播放符号）的那个），它会显示一个带菜单栏的小窗口，菜单栏有两个选项：菜单和帮助，以及一个空的状语栏。但这是一个检查一切是否正常工作的不错方法。

现在我将解释如何向窗口添加文本标签和按钮。我不会深入探讨您可以使用的众多选项和控件，因为本教程的目的是对框架进行简单介绍。但我会解释一些关于开发环境的事情。

中间是我们看到的“设计窗口”。在那里，我们可以根据我们正在编辑的文件来编辑图形界面或代码。就在这个窗口的上方，我们有两个按钮，一个打开菜单栏编辑器，另一个打开状态栏编辑器。但最重要的是，在设计窗口下方，我们有一组按钮，其中包含我们可以在开发中使用的控件，这些控件按类别组织。

在左侧，我们看到两个不同的部分，上方是资源/文件浏览器，下方是属性编辑器。

资源/文件浏览器可以让我们轻松找到我们想要编辑的文件或资源。顶部有一些选项卡。使用它们，我们可以从不同的视图进行切换。最重要的选项卡是“项目”选项卡和“资源”选项卡。

 

在项目树中，我们可以找到程序所涉及的所有文件。在资源树中，我们可以找到图形资源。

文件/资源导航器下方的属性编辑器可以让我们直接修改某些资源属性。

我稍后会在我们处理窗口时回到这一点。

在右侧，我们有一个按钮栏，它会影响某些资源。前四个按钮决定新资源将添加到哪里（在指针处、当前元素内部、以及在当前元素之后或之前）。然后我们有一个带叉的按钮用于删除当前元素，下面是“显示预览”按钮。最下面的按钮打开“属性面板”，其中包含一些放置和大小选项。

 

添加一些东西

我将解释的前三个步骤是您可以在每个新项目中使用的基本步骤。

1. 在设计窗口下方的控件菜单中，选择“布局”选项卡。这里我们找到了sizers。Sizers 帮助我们在窗口中定位和调整元素的大小。当有人调整窗口大小时，Sizers 会负责调整元素和元素之间空间的大小。

所以，从“布局”元素中选择基本的一个wxBoxSizer。这些 Sizers 将元素组织成一行水平或垂直。要向窗口添加元素，请单击所需的元素，在此例中为 wxBoxSizer，然后单击设计窗口中的虚线面板。现在窗口看起来应该是这样的。

2. 现在我们可以开始向其中添加一些元素，但首先添加一些额外的东西。首先，选择控件菜单的“标准”选项卡，单击 wxPanel，然后单击小方块以向其中添加一个面板。确保已选择了 boxSizer，要知道这一点，只需查看左侧的资源树，您将在其中看到 sizer 已添加到树中，并且当您在图形屏幕中选择它时，它会在资源树中被选中，反之亦然。wxPanel 会添加一个精美的背景，并为窗口添加一些特性。

3. 现在我们在 Panel 中添加另一个 wxBoxSizer。所以，在选中 wxPanel 的情况下，单击“布局”选项卡中的 wxBoxSizer，然后再次单击框内。现在窗口看起来应该像这张图片。

这些步骤构成了大多数程序的良好启动。现在我们添加交互元素。

4. 一个 Hello World 程序应该显示 Hello World 文本，所以我们添加它。在“标准”选项卡中，选择 wxStaticText，然后单击框内。这将向窗口添加一个文本标签。

如果您查看左侧的资源属性编辑器，您可以看到一个包含一些变量和值的表。

第一个是元素的标签。它存在于所有显示文本的元素中，最初它说“Label”。通过单击右侧列（值列）可以编辑它，所以这样做，单击 Label 行的右侧列，然后编辑文本，输入一些巧妙的内容，如 Hello World（你知道，用其他文本开始会带来坏运气）。

5. 现在添加一些交互。我们将添加一个退出窗口的按钮。所以单击“标准”选项卡中的 wxButton 按钮。您会看到我们正在设计的窗口变成蓝色，现在当您将鼠标光标悬停在我们上一步添加的 Label 上时，它的一侧会变成浅蓝色，这表明新的资源将添加到哪一侧，因为 wxStaticText 不能包含任何元素，所以它会自动添加到它的一侧。单击右侧添加按钮。

 

转到属性编辑器并编辑按钮的标签，就像我们对待 Static Text 标签一样，并输入一个参考文本。因为我们的按钮将关闭窗口，所以我输入“Quit”。

6. 您现在可以尝试通过单击“构建和运行”按钮来构建和运行程序。应该会出现一个带有 Hello World 文本和一个无用按钮的小窗口。所以，为按钮添加一些功能。要关闭窗口，您可以单击标题栏的关闭按钮（传统的十字）或转到“文件/退出”。

在设计器中双击我们添加的按钮，它会带我们到 HelloWorldMain.cpp 文件（或您为项目命名的主文件）。

您可能需要向下滚动才能找到一个名为……的函数。

void HelloWorldFrame::OnButton1Click(wxCommandEvent& event)
{
}

此函数处理按钮单击事件并对其进行一些操作，每当您单击按钮时都会调用它。好吧，目前它并没有做太多事情，所以我们将编辑此函数以赋予它一些功能。所以，在函数体中添加：

 

void HelloWorldFrame::OnButton1Click(wxCommandEvent& event)
{
    Close();
}

Close() 函数会关闭窗口，所以现在当您再次编译时，您就可以使用自己的按钮关闭窗口了。

这是最终结果。

一些最后的说明

如果您选择设计中的任何资源，您可以在属性编辑器中看到的属性之一是大小（宽度和高度）以及位置（x 和 y）变量。您可以为它们提供值，或者只勾选“默认大小”和“默认位置”选项，这样布局管理器就会为任何元素和窗口本身选择合适的位置和大小。这是开始的最佳选择，也是我们将要制作的大部分程序。

这是一个非常基础的教程。我的想法是制作更多教程来解释其他特性。但是您可以自己尝试，有大量的资源可以使用。

任何建议、更正、疑问或评论都欢迎。感谢您的阅读。