GUI Designer快速界面布局使用手册

1.界面布局介绍

在同一个窗口中，放置控件时可能出现杂乱无章的现象，可以通过 GVSUI 中的界面布局和网络布局控件进行界面布局。

2.如何进行界面布局

2.1 如何添加控件

打开或新建工程，点击常用控件模块中的按钮图标，添加六个按钮控件，并对按钮控件添加文本显示，具体操作步骤和方法详看《按钮类使用手册》，如图 2.1 所示。

图2.1 添加控件

2.2 如何设置上对齐

选中一个控件后，长按“Ctrl”键再选中其他控件，通过此方法可选中多个控件或通过鼠标直接选中多个控件。选中两个或以上控件，点击布局模块中的上对齐，可对所选控件进行上对齐，以最靠上的控件为准，如图 2.2 所示。

图2.2 上对齐

2.3 如何设置下对齐

选中多个控件，点击布局模块中的下对齐，可对所选控件进行下对齐，以最靠下的为准，如图 2.3 所示。

图2.3 下对齐

2.4 如何设置左对齐

选中多个控件，点击布局模块中的左对齐，可对所选控件进行左对齐，以最靠左的为准，如图 2.4 所示。

图2.4 左对齐

2.5 如何设置右对齐

选中多个控件，点击布局模块中的右对齐，可对所选控件进行右对齐，以最靠右的为准，如图 2.4 所示。

图2.5 右对齐

2.6 如何设置水平等距

选中多个控件，点击布局模块中的水平等距，可对所选控件进行水平等距调整，两侧控件不变，中间的控件位置调整达到中间控件与两侧控件水平等距，如图 2.6 所示。

图2.6 水平等距

2.7 如何设置水平居中

选中多个控件，点击布局模块中的水平居中，可对所选控件进行水平居中调整，所选控件位置进行调整达到中点位置与窗口左右两侧位置距离相同，如图 2.7 所示。

图2.7 水平居中

2.8 如何设置垂直等距

选中多个控件，点击布局模块中的垂直等距，可对所选控件进行垂直等距调整，两侧控件不变，中间的控件位置调整达到中间控件与两侧控件水平等距，如图 2.8 所示。

图2.8 垂直等距

2.9 如何设置垂直居中

选中多个控件，点击布局模块中的垂直居中，可对所选控件进行垂直居中调整，所选控件位置进行调整达到中点位置与窗口左右两侧位置距离相同，如图 2.9 所示。

图2.9 垂直居中

3.如何使用网络布局

添加网络布局，添加控件可直接对所添加的控件进行布局，相较于界面布局更加快速且简单。

3.1 如何添加网络布局

点击工具箱中的容器类控件，选择网络布局控件，可添加一个网络布局控件，如图 3.1 所示。

图3.1 添加网络布局控件

3.2 如何图像替换

选中网络布局控件，点击右侧属性窗口中的图像，可设置其背景的图像替换，设置背景即设置网络布局的显示，如图 3.2 所示。

图3.2 图像替换

3.3 如何设置杂项

选中网络布局控件，点击右侧属性窗口中的杂项，可设置网格的高宽度和设置网格的对齐方式，如图 3.3 所示。

图3.3 设置杂项
3.3.1 如何设置网格高宽度
选中网格宽高度下的输入框，通过键盘或“+ ”“- ”按钮可设置网格高宽度，网络布局控件设置的网格宽度和网格高度即将网络布局控件进行等份划分，网格宽度为 2 网格高度为 2 即将网络布局控件划分为 4 个网格，可添加 4 个控件，如图 3.4 所示。