第4章 感受（二）——4.3. Hello GUI 布局篇(2)

[回到目录]

白话C++

 

4.2. Hello GUI 布局篇(2)

（配套光盘中提供本节教程的动画版）

继续前一小节，确保在Code::Blocks中打开项目“HelloGUILayout”；并且切换出wxSmith可视化设计界面。本小节，我们身负双重责任：

其一、通过设计一个真实应用的界面， 进一步熟悉wxSmith的使用方法。

其二、本节的设计成果，将成为本章后续“Hello Database GUI版”所需要的窗口界面。

4.3.1. 设计目标

先来看一眼我们的设计目标（设计期窗口最终效果）：

图 76 布局篇设计目标

像这样一个界面，并不算复杂，熟悉wxSmith的程序员，3分钟不到即可搞定。但对于初学者，需要细细说来才好上手，并且有一个附加前提：已经认真学习过前一小节。

首先可以看出这当中存在4个BoxSizer，它们的布局（嵌套）关系如下图所示：

图 77 四个BoxSizer嵌套关系

其中：BoxSizer1嵌套了BoxSizer2和BoxSizer3。而BoxSizer3又嵌套了BoxSizer4。

在设计目标图的左下角，我们还看到一个网格状的小块，它是一个“Spacer/空白”控件，同样仅在设计期间可见，它的作用是“占位置”。本例中，它的责任是：“死守”窗口左部的“无名空地”，坚定不移地将它右边的一排按钮等控件挤过去。

4.3.2. 设计步骤

步骤 1： 选中“BoxSizer1”，（如果你感觉不太好选中它，请求助“控件树面板”）。将其“Orientation”属性值由“wxHORIZONTAL”修改为“wxVERTICAL”。

步骤 2： 选中“BoxSizer2”，将“Orientation”属性值由“wxVERTICAL”修改为“wxHORIZONTAL”。通过“控件定位面板”，将4个方向上的Border全部打上勾。再选中其“扩展/Expand”（打上勾）。

步骤 3： 选中两个按钮间的分隔线，修改其“Width/宽度”属性值为3。

步骤 4： 选中“StaticText1”标签，修改其“Label”属性值为“北京2008奥运会中国金牌获得者”。修改其“Proportion”属性值为：0。

步骤 5： 选中“About”按钮，修改其“Label”属性值为“关于”（修改完后需要回车确认）；修改其“Proportion”属性值为：0。

步骤 6： 选中“Quit”按钮，修改其标题为“退出”；修改其“Proportion”属性值为：0。

以上步骤，得到如下设计结果：

图 78 Hello GUI Layout 设计效果1

请按下“快速操作工具栏”中的第一个图标按钮。然后继续以下步骤：

步骤 7： 切换“控件面板”到“Layout”页，然后选中“wxBoxSizer”控件（ ，不同版本图像略有不同）；然后鼠标移到设计期窗口的“StaticText1”的尾部，如下图所示：

图 79 在标签之后添加一个Sizer

点击鼠标，将在标签之后添加入一个wxBoxSizer。

步骤 8： 选中刚刚加入“BoxSizer3”，修改其“Proportion”属性值为1（通常1就是默认值），并选中其“扩展/Expand”属性。

步 骤 9： 再次在“控件面板”的“Layout”页内，选中“wxBoxSizer”控件，鼠标移动到“BoxSizer3”之上，点击，完成在BoxSizer3 内加入BoxSizer4，然后修改BoxSizer4的“Proportion” 属性值为0。并选中其“扩展/Expand”属性。修改其“Orientation”属性值为“wxVERTICAL”。

步 骤 10： 切换“控件面板”到“Standard”页，选中“wxStaticText”控件（ ），鼠标移到刚添加的“BoxSizer4”，点击，将“StaticText2”加入。修改其的“Proportion”属性值为0，并选中其“扩展 /Expand”属性。

步骤 11： 再次在“控件面板”中选择“wxStaticText”控件，鼠标移到刚添加的“StaticText2”尾部，在其下加入“StaticText3”控 件。类似的方法，加入“StaticText3”、“StaticText5”、“StaticText6”。每个“StaticText”的 “Proportion”属性都修改为0，并选中其“扩展/Expand”属性”。

步骤 12： 将“StaticText2 ~ StaticText6”这5个静态标签控件 的“Var name/变量名”依序修改为“StaticTextLine1 ~ StaticTextLine5”（并确保它们的“Is member”属性处于选中状态）。

现在，得到的设计结果是：

图 80 Hello GUI Layout 设计效果2

步 骤 13： 在“控件面板”的“Standard”页内，选择“wxTextCtrl”控件（ ），将其添加到“StaticTextLine5”之下，将其“Var name”由“TextCtrl1”修改为：“TextCtrlMemo”。确保其“Proportion”属性值为1，并选中其“扩展/Expand” 属性。

接着，从“控件属性面板”中，找到“风格/Styles”属性，展开选项，选中以下三个子项：“wxTE_MULTILINE, wxTE_READONLY, wxTE_WORDWRAP”（三个子选项意义分别是：多行、只读、自动换行）。最后适当地拉伸该控件的长宽。

步 骤 14： 在 “Standard”页内，选择“wxStaticBitmap”控件（ ），并将它添加“BoxSizer3”之内，“BoxSizer4”的右侧。并设置“StaticBitmap1”的“Proportion”属性值为 1，并选中其“扩展/Expand”属性，适度地拉伸其宽度。

现在，得到的设计结果是：

图 81 Hello GUI Layout 设计效果3

注意：由于“StaticBitmap1”内容为空，所以当它处于未选中状态时，会看不到它的存在。

步骤 15： 在“Standard”页内，选择“wxButton”控件（ ），通过鼠标移动。加入到“退出”按钮前面。设置“Var name”为“ButtonGet”；设置其“Proportion”属性值为0；设置其标题为“获取(&R)”；

步 骤 16： 在“Standard”页内，选择“wxTextCtrl”控件，加入到“获取”按钮前面，设置“Var name”为“TextCtrlPassword”, 设置其“Proportion”属性值为0；在“风格/Style”属性中选中子项：“wxTE_PASSWORD”；最后设置其“Text”属性为 “1234”，将显示为“****”。

步骤 17： 在“Standard”页内，选择“wxStaticText”控件，加入到“TextCtrlPassword”前面，设置其“Proportion”属性值为0；设置其“Label”属性值为：“数据库密码:”。

现在，得到的设计结果是：

图 82 Hello GUI Layout 设计效果4

步骤 18： 接下来，请在“关于”按钮左边，连续加入四个按钮，每个按钮均做如下设置：

“Proportion”属性值为0；

取消“Default size”，然后设置“Width”和“Height”值均为24（可先用鼠标改变按钮大小）。

然后，从左向右，依次将4个按钮标题修改为： “|<”、“>”、“>”、“>|”；同时将“Var name”依次修改为：“ButtonFirst”、“ButtonPrior”、“ButtonNext”、“ButtonLast”。

步骤 19： 切换“控件面板”到“Layout”页面，选择“Spacer”控件（不同版本的Code::Blocks图像略有不同），将它添加到“|<”按钮前面。确保该“Spacer”的“Proportion”为1。

步 骤 20： 在“控件树面板”中，选中对应“设计期窗口”的“wxDialog”节点，在“控件属性面板”将“标题”属性值修改为“Hello GUI Layout”；然后修改对话框的“风格”选项，选中：“wxDEFAULT_DIALOG_STYLE, wxRESIZE_BORDER”两项。

至此，我们完成设计目标。

4.3.3. 设计结果

• 预览

请点击“快速操作工具栏”中用于“预览”的按钮，应看到如下窗口：

图 83 Hello GUI Layout 预览效果

• 检查

你的一切步骤，是否都做对了，光看对话框样子长得像，是不够的，请按下面清单进行检查。如果检查出问题来，请参看每一项随后的括号内的提示。

第一、 写着“文本”的编辑框，其内容应是只读的。（步骤13，“wxTE_READONLY”）；

第二、 “数据库密码：”之后的编辑框，可以录入内容，但内容回显为星号。（步骤16，“wxTE_PASSWORD”）；

第三、 对话框可以（通过鼠标拉到边沿）改变大小。（步骤20，“wxRESIZE_BORDER”）；

第四、 当对话框宽度增大时，底下一排的按钮等控件，应一直保持向右靠；并且所有按钮的大小没有发生变化。（步骤19，“Spacer”控件的“Proportion”值应为1，而其它所有控件的“Proportion”值应为0）

第五、 当对话框的高度增大时，写着“文本”的编辑框，应随之增高。（步骤13，“Proportion”值应为1。）；

第六、 当对话框宽度增大时，“北京2008奥运会中国金牌获得者”字样应在水平方向保持居中。

第七、 对话框的标题是：“Hello GUI Layout”。（步骤20）

“Var name/变量”的设置，虽然从界面上看不到，但很重要。如果设置有错，可能会在“Hello Database GUI版”中给您带来麻烦。请读者认真检查。

• 编译

保存成果。然后按“Ctrl + F9”，项目将开始编译（如果有编译错误，请首先检查您是否完成“全局文件默认编码”）。

再按F9，程序将运行，点击“关于”按钮，能看到弹出消息框；点击“退出”按钮关闭程序。

 

白话C++

[回到目录]