在同一个窗口中,放置控件时可能出现杂乱无章的现象,可以通过 GVSUI 中的界面布局和网络布局控件进行界面 布局。
2.如何进行界面布局
2.1 如何添加控件
打开或新建工程,点击常用控件模块中的按钮图标,添加六个按钮控件,并对按钮控件添加文本显示,具体 操作步骤和方法详看《按钮类使用手册》,如图 2.1 所示。
![GUI Designer快速界面布局使用手册插图1 GUI Designer快速界面布局使用手册插图1](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.1 添加控件
2.2 如何设置上对齐
选中一个控件后,长按“Ctrl”键再选中其他控件,通过此方法可选中多个控件或通过鼠标直接选中多个控件。 选中两个或以上控件,点击布局模块中的上对齐,可对所选控件进行上对齐,以最靠上的控件为准,如图 2.2 所示。
![GUI Designer快速界面布局使用手册插图3 GUI Designer快速界面布局使用手册插图3](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.2 上对齐
2.3 如何设置下对齐
选中多个控件,点击布局模块中的下对齐,可对所选控件进行下对齐,以最靠下的为准,如图 2.3 所示。
![GUI Designer快速界面布局使用手册插图5 GUI Designer快速界面布局使用手册插图5](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.3 下对齐
2.4 如何设置左对齐
选中多个控件,点击布局模块中的左对齐,可对所选控件进行左对齐,以最靠左的为准,如图 2.4 所示。
![GUI Designer快速界面布局使用手册插图7 GUI Designer快速界面布局使用手册插图7](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.4 左对齐
2.5 如何设置右对齐
选中多个控件,点击布局模块中的右对齐,可对所选控件进行右对齐,以最靠右的为准,如图 2.4 所示。
![GUI Designer快速界面布局使用手册插图9 GUI Designer快速界面布局使用手册插图9](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.5 右对齐
2.6 如何设置水平等距
选中多个控件,点击布局模块中的水平等距,可对所选控件进行水平等距调整,两侧控件不变,中间的控件 位置调整达到中间控件与两侧控件水平等距,如图 2.6 所示。
![GUI Designer快速界面布局使用手册插图11 GUI Designer快速界面布局使用手册插图11](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.6 水平等距
2.7 如何设置水平居中
选中多个控件,点击布局模块中的水平居中,可对所选控件进行水平居中调整,所选控件位置进行调整达到 中点位置与窗口左右两侧位置距离相同,如图 2.7 所示。
![GUI Designer快速界面布局使用手册插图13 GUI Designer快速界面布局使用手册插图13](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.7 水平居中
2.8 如何设置垂直等距
选中多个控件,点击布局模块中的垂直等距,可对所选控件进行垂直等距调整,两侧控件不变,中间的控件 位置调整达到中间控件与两侧控件水平等距,如图 2.8 所示。
![GUI Designer快速界面布局使用手册插图15 GUI Designer快速界面布局使用手册插图15](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.8 垂直等距
2.9 如何设置垂直居中
选中多个控件,点击布局模块中的垂直居中,可对所选控件进行垂直居中调整,所选控件位置进行调整达到 中点位置与窗口左右两侧位置距离相同,如图 2.9 所示。
![GUI Designer快速界面布局使用手册插图17 GUI Designer快速界面布局使用手册插图17](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图2.9 垂直居中
3.如何使用网络布局
添加网络布局,添加控件可直接对所添加的控件进行布局,相较于界面布局更加快速且简单。
3.1 如何添加网络布局
点击工具箱中的容器类控件,选择网络布局控件,可添加一个网络布局控件,如图 3.1 所示。
![GUI Designer快速界面布局使用手册插图19 GUI Designer快速界面布局使用手册插图19](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图3.1 添加网络布局控件
3.2 如何图像替换
选中网络布局控件,点击右侧属性窗口中的图像,可设置其背景的图像替换,设置背景即设置网络布局的显 示,如图 3.2 所示。
![GUI Designer快速界面布局使用手册插图21 GUI Designer快速界面布局使用手册插图21](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图3.2 图像替换
3.3 如何设置杂项
选中网络布局控件,点击右侧属性窗口中的杂项,可设置网格的高宽度和设置网格的对齐方式,如图 3.3 所 示。
![GUI Designer快速界面布局使用手册插图23 GUI Designer快速界面布局使用手册插图23](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图3.3 设置杂项
3.3.1 如何设置网格高宽度
选中网格宽高度下的输入框,通过键盘或“+ ”“- ”按钮可设置网格高宽度,网络布局控件设置的网格宽 度和网格高度即将网络布局控件进行等份划分,网格宽度为 2 网格高度为 2 即将网络布局控件划分为 4 个网 格,可添加 4 个控件,如图 3.4 所示。
![GUI Designer快速界面布局使用手册插图25 GUI Designer快速界面布局使用手册插图25](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图3.4 网格设置
3.3.2 如何设置网格对齐方式
点击网格水平垂直对齐方式下的按钮弹出下拉框,有居中、左对齐和右对齐,选择居中则控件水平垂直对 齐方式为居中,选择左对齐则对齐方式为左对齐,选择右对齐则对齐方式为右对齐,如图 3.5 所示。
![GUI Designer快速界面布局使用手册插图27 GUI Designer快速界面布局使用手册插图27](https://www.modbus.cn/wp-content/themes/module/themer/assets/images/lazy.png)
图3.5 网格对齐方式
若有收获,就点个赞吧