3.5 容器与布局

3.5.1 矩形

矩形控件为图形控件之一。该控件可以在屏幕上位置一个矩形区域。并支持填充与否，圆角弧度，边框粗细，边框颜色等样式修改

可更改的样式属性：

宽度高度 (size)：1）通过更改矩形的宽度高度属性，可以得到不同大小的矩形控件；2）将鼠标放在矩形控件边缘，拖动边缘自由调整矩形控件的大小
坐标 (pos)：1）通过定义不同的XY值，来调整控件的位置；2）通过键盘↑↓← →键来调整矩形控件的XY坐标位置
透明度 (opa)：可以更改矩形的透明度，使其呈现完全隐藏，若隐若现等效果
是否填充 (fill)：该属性决定矩形控件是否有填充的颜色
圆角半径 (radius)：该属性决定矩形四角的圆角弧度。（宽高相等的矩形控件圆角半径设置为100，可以得到一个圆形）
边框宽度 (border_width)：当矩形设置为不填充时，该值决定了矩形边框的宽度
颜色 (color)：当矩形选择填充时，为背景颜色。当不填充时该属性为边框颜色
隐藏 (visible)：可以在画布中隐藏/显示元件

图为不同样式的矩形控件

3.5.2 屏幕

屏幕控件为屏幕控件之一。该控件是所有其他控件的基础。一个GT-HMI项目中至少需要存在一个屏幕控件。当只剩下最后一个屏幕控件时，该屏幕控件无法被删除。同时，程序运行时，会从图层最上层的一个屏幕控件开始运行。如果需要切换屏幕显示，则需要通过事件来加载屏幕；屏幕支持添加事件动画效果，以帮助提升用户体验和界面的视觉吸引力，提高应用的质量和用户满意度；添加事件动画效果可设置触发方式和触发事件，触发方式用于实现屏幕间平滑过渡的动态效果，专为触摸屏优化用户界面切换体验而定制。可分为4种方式，如图所示：触发事件可设置返回所设置页栈，允许用户定义页面回退的动画效果，通过设定返回页栈来控制回退的屏幕层级。例如，设置页栈为1时，将触发返回到前一屏幕的动画；若设置页栈为2，则可实现返回到前两个屏幕的动画效果

3.5.3 弹窗

可以用于按钮弹出的对话框使用

可更改的样式属性：

宽度高度 (size)：通过定义不同的宽度高度，可以实现不同大小的显示区域；1）将鼠标放在对话框边缘，拖动边缘自由调整对话框的大小
坐标 (pos)：1）通过定义不同的XY值，来调整控件的位置；2）通过键盘↑↓← →键来调整弹窗控件的XY坐标位置
透明度 (opa)：可以更改控件显示的透明度
隐藏 (visible)：可以在画布中隐藏/显示元件
背景 (background)：可以修改生成二维码的背景颜色
关闭按钮 (close_btn)：在弹窗右上角显示/隐藏关闭按钮
边框颜色 (border_color)：可以任意修改弹窗的边框颜色
边框宽度 (border_width)：可以任意修改弹窗的边框大小
边框圆角 (border_radius)：可以任意修改弹窗的圆角大小

图为弹窗效果

3.5.4 状态栏

状态栏为公共控件。该控件是所有屏幕共有部分。状态栏是位于屏幕顶部显示的区域，用于展示设备的各种状态信息和快捷操作选项

可更改的样式属性：

高度 (height)：1）通过定义不同的高度，可以实现不同高度的显示区域；2）将鼠标放在状态栏控件边缘，拖动边缘自由调整状态栏的高度；注：宽度自动生成，坐标XY值默认(0,0)
字体颜色 (font_color)：可以修改状态栏上显示的文本的字体颜色
字体 (font_family)：可以修改状态栏上文本内容使用的字体。如需设置字体，则必须先在字库选项卡中添加字库。如文本中存在中文则必须设置中文字体。英文则不是必须
背景 (background)：可以修改状态的背景颜色
透明度 (opa)：可以更改状态栏透明度，使其呈现完全隐藏，若隐若现等效果
项内元素宽度比例 (scale)：状态栏分为三个显示区域：左区域，标题，右区域，可以通过修改左区域，标题，右区域的任意数值，调整状态栏内项元素的宽度显示比例
左区域元素 (left_items)：1）通过添加/删除任意数量按钮，可以在状态栏左区域显示/删除图标；2）通过添加/删除任意数量文本，可以在状态栏左区域显示删除文本；3）通过任意修改文本元素宽度，可以实现不同宽度的显示区域；4）通过箭头按键，可以更改文本或图标在状态栏左区域的左右排序
文本 (text)：可以修改文本中的显示内容
右区域元素 (right_items)：1）通过添加/删除任意数量按钮，可以在状态栏右区域显示/删除图标；2）通过添加/删除任意数量文本，可以在状态栏右区域显示删除文本；3）通过任意修改文本元素宽度，可以实现不同宽度的显示区域；4）通过箭头按键，可以更改文本或图标在状态栏右区域的左右排序
是否显示状态栏背景 (show_bg)：可以隐藏/显示状态栏背景显示
对应屏幕内是否显示状态栏 (show_on_screen)：可以选中需要显示状态栏的屏幕进行显示

图为状态栏效果

3.5.5 布局

布局为高级控件之一。用于自动对齐和排版画布内的子控件

可更改的样式属性：

宽度高度 (size)：通过定义不同的宽度高度，可以实现不同大小的显示区域；1）将鼠标放在布局框边缘，拖动边缘自由调整布局框的大小
坐标 (pos)：1）通过定义不同的XY值，来调整控件的位置；2）通过键盘↑↓← →键来调整布局控件的XY坐标位置
所属布局 (parent_layout)：可以添加所属的子控件
透明度 (opa)：可以更改布局控件在画布中显示的透明度
隐藏 (visible)：可以在画布中隐藏/显示元件
主轴方向 (flex_direction)：可以修改水平主轴和垂直交叉轴的排列方向；1）水平向右（默认值）：主轴为水平方向，起点在左端；2）水平向左：主轴为水平方向，起点在右端；3）垂直向下：主轴为垂直方向，起点在上沿；4）垂直向上：主轴为垂直方向，起点在下沿；注意：布局是一个虚拟控件，将其他控件添加进布局控件以实现弹性布局，；加入布局的控件位置坐标将会失效
主轴对齐方式 (justify_content)：可以修改主轴从左到右的对齐方式；1）起始对齐（默认值）：左对齐；2）结束对齐：右对齐；3）居中对齐：居中；4）等边距对齐：两端对齐，控件之间的间隔都相等；5）两端对齐：控件分别靠左、靠右对齐；6）等间隔对齐：每个控件两侧的间隔相等
交叉轴对齐方式 (align_items)：可以修改交叉轴从上到下的对齐方式；1）顶部对齐（默认值）：交叉轴的起点对齐；2）居中对齐：交叉轴的中点对齐；3）底部对齐：交叉轴的终点对齐
左右边距 (gap)：可以修改控件之间的间距大小
控件实际范围 (show_border)：可以显示/隐藏布局控件的虚拟边框
子控件实际范围 (show_child_border)：可以显示/隐藏子控件的虚拟边框
边框颜色 (border_color)：可以任意修改布局控件的边框颜色
子边框颜色 (child_border_color)：可以任意修改布局控件的边框颜色

图为布局控件与子控件的效果