当前位置：首页 > news >正文

在CodeBolcks下wxSmith的C++编程教程——从Hello world开始讲述wxSmith使用基础

news 2025/9/22 22:29:44

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: Hello world - Code::Blocks

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

在Code：：Blocks中使用向导构建一个wxWidgets 项目
在Code：：Blocks中的wxSmith简介
使用wxSmith在项目表单中添加Hello world
在Code：：Blocks中使用中文简介
结束语

1.在Code：：Blocks中使用向导构建一个wxWidgets 项目

在我的另一篇文章《在CodeBolcks+wxWidgets+wxSmith下的C++编程教程——用向导创建一个wxWidgets项目（sTetris） - lexyao - 博客园》中详细介绍了在在Code：：Blocks中构建可以使用wxSmith的wxWidgets 项目的方法以及向导构建的程序框架的代码分析，为了避免重复的内容占用网站空间的资源，在这里不再重复讲述构建项目的过程。您在阅读这篇文章的后续内容之前，必须阅读《在CodeBolcks+wxWidgets+wxSmith下的C++编程教程——用向导创建一个wxWidgets项目（sTetris） - lexyao - 博客园》，从中了解构建wxWidgets 项目的操作方法以及构建项目后生成了哪些内容。
在这里，我将重点介绍与那篇文章中不同的地方。

1.1 创建项目过程中在向导页面选择的不同之处

这篇文章中的项目名称为tu01，文件存储路径为D:\CodeBlocks\Test\smith，构建项目的全路径文件名为D:\CodeBlocks\Test\smith\tu01\tu01.cbp。
在Code：：Blocks 用户文档中wxSmith教程中项目名称是Plain。在你的项目中你可以按你的需要填写这个名称。

这篇文章的项目构建基wxFrame的项目，需要使用wxSmith编辑GUI界面，所以上图中只能选择①②两个选项。

这个页面有两部分选项，重点是上面的那一部分。
在wxWidgets Library Settings栏目中选择wxWidgets库文件的设置。
这是一组多选项，你可以选择其中的任意一个或多个，但你选择的必须是可用的。这一组选项中的每一个选项都对应着你编译wxWidgets库文件时使用的命令行参数：

如果编译参数中有SHARED=1，则需要选中Use wxWidgets DLL，否则不可用
如果编译参数中有MONOLITHIC=1，则需要选中wxWidgets is built as a monolithic library，否则不可用
如果编译参数中有UNICODE=1，则需要选中Enable unicode，否则不可用

由于我在做这张截图时编译wxWidgets库文件时的命令行参数使用了SHARED=0 MONOLITHIC=1 UNICODE=1，所以我必须选中wxWidgets is built as a monolithic library和Enable unicode，而不能选中Use wxWidgets DLL。
在Miscellaneous Settings栏目中包含了几个杂项选项，其中的选项不是必须的。
建议选中“Create and use precompiled header(PCH)”，有了这个选项后有些文件仅在第一次编译时执行编译操作，这会加快第一次之后的编译速度。

跟着向导完成构建新项目的操作后，向导为你添加了上图中的文件。你可以点击“管理”栏目中的“projects”页面看到这个画面。其中wxsmith栏及其下的文件仅在前面的向导中选中了①wxSmith的时候才会出现，而且只有如此才能在后续的操作中使用wxSmith编辑项目的GUI界面，而其中扩展名为wxs的文件就是wxSmith构建的GUI界面文件。双击这个wxs文件，你会看到以下画面：

记住这个画面，后续的很多叙述都是基于这个画面展开的。

1.2 项目编译运行中注意的事项

创建的项目需要经过编译链接后形成扩展名为exe的可执行文件，这个exe文件就是外面编写程序的最终成果。现在我们就来看一看我们的成果。
执行“构建并运行”就可以完成编译链接以及运行的全过程，你会看到运行后的程序窗口。执行“构建并运行”操作可以选择以下三个途径之一：

点击主菜单：Build>>Build and Run
点击工具栏按钮：在使用方法1时你会看到“Build and Run”前面的图标，在工具栏中找到同样的图标就是“构建并运行”的按钮
按下快捷键（加速键）：在使用方法1时你会看到“Build and Run”后面的快捷键，这里是F9。

构建成功后你会看到程序运行后的窗口，但有时候并不能如你所愿。编译过程会出现错误导致编译失败。
为什么会出现错误呢？这与Code：：Blocks和wxWidgets 的版本有关。比如：在Code：：Blocks的25.03版使用3.2.x版本的wxWidgets 就可以正常完成编译链接和运行，而使用3.3.x版本的wxWidgets 就会出现错误。
要修正这个错误，你需要执行以下操作：

在“管理”栏中的tu01上右击鼠标，从菜单中选择“Build options...”，打开“项目选项”窗口
在“项目选项”窗口选择“Linker settings”页面
点击“Add”按钮，从wxWidgets 库文件所在的文件夹中选择一个名为的文件libwxwebpd.a（在我的电脑中文件夹是D:\CodeBlocks\wxWidgets-3.3.1\lib\gcc_lib）

1.3 记住创建新的项目的操作流程

在这里需要读者务必要记住创建新项目的操作流程，在今后的文章中需要创建新项目时只会说创建的项目的名称，不会再重复讲解创建项目的过程。

从主菜单开始选择创建新项目，打开新建项目窗口：File>>Project...
在新建项目窗口中选择Project>>wxWidgets Project>>Go，启动新建项目向导
在向导的各个页面中指定项目名称、存放项目的文件夹，选择适当的选项，直到最后创建项目的框架
构建并运行项目。如果出现错误，需要在项目的“构建选项”中添加必要的库文件

2.在Code：：Blocks中的wxSmith简介

2.1 添加wxs文件

使用向导构建新项目时已经为你的项目添加了一个wxs文件，这是应用程序的主界面。当你的应用程序需要多个窗口时，你需要添加更多的wxs文件。
点击主菜单的wxSmith项，你会看到可以添加的资源的类型，点击任何一项都会添加一个wxs文件，你会在“管理”栏的sxSmith下看到添加的wxs文件：

Add wxPanel
Add wxScrollingDialog
Add wxDialog
Add wxFrame

2.2 打开wxs文件

向导为你添加的wxs只是一个空白界面，你可以在其中添加wxWidgets组件构建GUI界面。这需要你打开wxs文件。
打开wxs文件的方法：

在“管理”的Projects页面中双击wxs文件名就可以打开wxs文件，这时你会看到右边所见即所得的GUI编辑画面，还有右下角的属性浏览器。这时你就可以使用wxSmith编辑wxs文件中的GUI界面了
wxs文件是xml格式的，你可以用任何文本编辑器打开，但这种方式只可以查看其中的内容，不要在其中做任何修改。你的任何修改都可能导致wxSmith不能识别wxs中的内容

2.3 编辑GUI界面

使用wxSmith编辑GUI界面的操作不仅仅是在wxs文件中体现，还会同步修改到对应的.cpp文件和.h文件，所以wxs文件只能使用wxSmith修改，除非你有了很高的水平，能够保证你用其他方法修改后不会出现错误。

你可以回到上面的截图中查看用红字标记的“可选的组件面板”，这里有所有可用的wxWidgets组件，你可以从中选择任何一个组件添加到你的GUI界面中。这些组件分为两类：

容器类组件：可以在其中放置其他组件，用于界面排版布局，比如：Layout下的组件、标准页面的wxPanel组件
分容器组件：不可以包含其他组件的组件，用于实现界面中的显示或操作功能，大多数组件都属于这一类，比如：wxButton、wxChoice、wxTextCtrl

添加组件的方式有多种方式，与窗口右边的几个图标有关。

当选中第一个图标时，添加组件的操作步骤是：

在组件面板中选择一个组件
在GUI界面中选中要放置组件的位置点击鼠标

当选中第二个图标时，添加组件的操作步骤是：

在GUI界面中选择一个容器组件
在组件面板中点击一个组件，这个组件就被添加到上面选择的组件中了

当选中第三（四）个图标时，添加组件的操作步骤是：

在GUI界面中选择一个组件
在组件面板中点击一个组件，这个组件就被添加到上面选择的组件前面（后面）了

如果你想从界面中删除已经添加的组件，可以按以下步骤操作：

在GUI界面中选择要删除的组件
点击右边的红色“X”图标，选中的组件就删除了

3.使用wxSmith在项目表单中添加Hello world

向导给我们创建的tu01Frame运行后窗口中是空白的，现在我们来添加一些组件。具体的操作步骤如下：

用“2.2 打开wxs文件”的方法打开tu01Frame.wxs文件
用“2.3 编辑GUI界面”的方法向tu01Frame中添加组件。你可以尝试使用多种方法，添加组件后在“管理”的“Resources”页面要看到如下样式：
修改组件的Label：
1. 点击StaticText1，在下面的属性浏览器中看到StaticText1的属性列表，将StaticText1的Label属性改为“Hello， World！”
2. 用同样的方法修改StaticText2的Label为“你好，世界！”，修改Button1的Label为“Close”
经过以上修改后的tu01Frame界面变成了这个样子：

在我们的想象中，构建并运行后的tu01Frame项目中应该看到上图中的样子，但实际运行中我们看到的却是下边的样子：

为什么会这样呢？在找到答案之前我们先来做一个尝试。
打开tu01Main.cpp文件，在里面查找“Hello， World！”，我们会找到以下代码：

 1 tu01Frame::tu01Frame(wxWindow* parent,wxWindowID id)
 2 {
 3     //(*Initialize(tu01Frame)
 4     ......
 5     StaticText1 = new wxStaticText(Panel1, ID_STATICTEXT1, _("Hello， World！"), wxDefaultPosition, wxDefaultSize, 0, wxT("ID_STATICTEXT1"));
 6     BoxSizer2->Add(StaticText1, 1, wxALL|wxALIGN_CENTER_HORIZONTAL|wxALIGN_CENTER_VERTICAL, 5);
 7     StaticText2 = new wxStaticText(Panel1, ID_STATICTEXT2, _("你好，世界！"), wxDefaultPosition, wxDefaultSize, 0, wxT("ID_STATICTEXT2"));
 8     BoxSizer2->Add(StaticText2, 1, wxALL|wxALIGN_CENTER_HORIZONTAL|wxALIGN_CENTER_VERTICAL, 5);
 9     Button1 = new wxButton(Panel1, ID_BUTTON1, _("Close"), wxDefaultPosition, wxDefaultSize, 0, wxDefaultValidator, wxT("ID_BUTTON1"));
10     BoxSizer2->Add(Button1, 1, wxTOP|wxBOTTOM|wxLEFT|wxALIGN_CENTER_HORIZONTAL|wxALIGN_CENTER_VERTICAL, 5);
11     ......
12     //*)
13 }

现在我们做以下修改：

将第5行的 _("Hello， World！")改为 _T("Hello， World！")
将第5行的 _("你好，世界！")改为 _T("你好，世界！")

这时，我们再次构建并运行tu01Frame项目，结果看到了我们期望的样子：

注意：wxSmith形成的代码会在下一次保存时重新恢复成_()，所以手动改成_T()的方法是不可取的。

4.在Code：：Blocks中使用中文简介

现在我们来解释上面构建并运行tu01Frame项目时其中的中文“你好，世界！”出现乱码的问题，也就是如何在Code：：Blocks中使用中文。

4.1 让Code：：Blocks变成中文界面

安装Code：：Blocks后运行看到的是英文界面。有些以中文为母语的用户想看到Code：：Blocks的中文界面，也就是应用程序界面汉化的问题。
早期的Code：：Blocks需要从往上下载汉化文件包，然后将Code：：Blocks界面汉化。
现在的Code：：Blocks提供了i18n的支持，Code：：Blocks本身也包含了中文界面的文件，只需要在设置中选用就行了。
以下是Code：：Blocks 25.03版使用中文界面的操作步骤：

点击主菜单：Settings>>Environment...打开环境设置窗口
在环境设置窗口中：①点击View，②选中国际化，③选择要使用的语言简体中文，④点击确定关闭窗口
关闭Code：：Blocks后重新运行，就会看到菜单及窗口中的文字都变成了中文。（新的设置在重新启动后生效）

从本人的使用体验来说，我推荐在不熟悉的时候使用英文界面，这样做的好处是便于学习：在网上能看到的教程或者论坛资料中使用的都是英文界面。
当然，熟悉了之后使用什么语言全看个人的爱好。有些不常用的功能可能使用母语更容易看懂。

4.2 在Code：：Blocks编写的代码中使用中文

编辑的程序代码中可以使用中文字符串或者注释。重新打开时这些中文会出现乱码。如果出现这种情况，就需要通过设置来解决。
设置的操作步骤如下：

点击主菜单：Settings>>Editor...打开编辑器设置窗口
在编辑器设置窗口中：①点击常规选项，②选择打开文件时使用的编码格式，③点击确定关闭窗口

我在Code：：Blocks 25.03版中选择使用UTF-8编码能够正常使用，而在Code：：Blocks 17.12版中选择UTF-8编码后cpp文件中的汉字正常，资源文件中会出现乱码，只能选择Windows-936编码。

4.3 在Code：：Blocks构建的应用程序中显示中文

Code：：Blocks提供了i18n支持，这时编写的程序GUI界面都是以英文，而在语言支持文件中使用对应的语言支持。
选择了i18n支持，则wxSmith会将GUI界面中需要语言翻译的字符串使用-()，就像前面遇到的 _("Hello， World！")。
如果你的程序不需要i18n支持，需要在wxSmith编辑的GUI界面中使用中文，那就需要在设置中选择相关的选项。

设置的操作步骤如下：