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++