3. 元件介绍
3.24 矩形
矩形控件为图形控件之一。该控件可以在屏幕上放置一个矩形区域，并支持填充与否、圆角弧度、边框粗细、边框颜色等样式修改。
可更改的样式属性：
- 宽度高度：通过更改宽度高度属性或拖动边缘调整矩形控件大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 透明度：更改矩形的透明度
- 是否填充：该属性决定矩形控件是否有填充的颜色
- 圆角半径：该属性决定矩形四角的圆角弧度（宽高相等的矩形控件圆角半径设置为100可以得到一个圆形）
- 边框宽度：当矩形设置为不填充时，该值决定了矩形边框的宽度
- 颜色：当矩形选择填充时为背景颜色，当不填充时该属性为边框颜色
- 隐藏：可以在画布中隐藏/显示元件
rectangle component
rectangle styles
screen component
3.25 屏幕
屏幕控件为屏幕控件之一，是所有其他控件的基础。一个GT-HMI项目中至少需要存在一个屏幕控件。当只剩下最后一个屏幕控件时，该屏幕控件无法被删除。程序运行时会从图层最上层的一个屏幕控件开始运行。
屏幕支持添加事件动画效果，以帮助提升用户体验和界面的视觉吸引力。添加事件动画效果可设置触发方式和触发事件：
触发方式（用于屏幕间平滑过渡的动态效果，共4种方式）：
- 水平滑动、垂直滑动、淡入淡出、无动画
触发事件：
- 加载屏幕：该事件会保存当前屏幕的显示效果并切换显示到另一屏幕控件
- 返回所设置页栈：允许用户定义页面回退的动画效果，通过设定返回步数来控制回退的屏幕层级
如果需要切换屏幕显示，则需要通过事件来加载屏幕。
rectangle component
rectangle styles
screen component
screen animation
screen transition
screen animation settings
3.26 对话框(二)
对话框为高级控件之一，可以用于按钮弹出的对话框使用。
可更改的样式属性：
- 宽度高度：通过定义不同的宽度高度或拖动边缘调整对话框大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 透明度：更改对话框显示的透明度
- 隐藏：可以在画布中隐藏/显示元件
- 背景：修改对话框的背景颜色
- 关闭按钮：在对话框右上角显示/隐藏关闭按钮
- 边框颜色：任意修改对话框的边框颜色
- 边框宽度：任意修改对话框的边框大小
- 边框圆角：任意修改对话框的圆角大小
dialog component v2
dialog properties
status bar component
3.27 状态栏
状态栏为公共控件，是所有屏幕共有部分。状态栏位于屏幕顶部显示的区域，用于展示设备的各种状态信息和快捷操作选项。
可更改的样式属性：
- 高度：通过定义不同的高度或拖动边缘调整状态栏的高度（宽度自动生成，坐标XY值默认为(0,0)）
- 字体颜色：修改状态栏上显示的文本的字体颜色
- 字体：修改状态栏上文本内容使用的字体
- 背景：修改状态栏的背景颜色
- 透明度：更改状态栏的透明度
- 项内元素宽度比例：状态栏分为三个显示区域（左区域、标题、右区域），可以通过修改各区域数值调整宽度比例
- 左区域元素：通过添加/删除按钮或文本来配置左区域内容
- 右区域元素：通过添加/删除按钮或文本来配置右区域内容
- 是否显示状态栏背景：隐藏/显示状态栏背景
- 对应屏幕内是否显示状态栏：选中需要显示状态栏的屏幕进行显示
dialog component v2
dialog properties
status bar component
status bar settings
status bar display
3.28 布局
布局为高级控件之一，用于自动对齐和排版画布内的子控件。
可更改的样式属性：
- 宽度高度：通过定义不同的宽度高度或拖动边缘调整布局框大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 所属布局：可以添加所属的子控件
- 透明度：更改布局控件在画布中显示的透明度
- 隐藏：可以在画布中隐藏/显示元件
- 主轴方向：水平向右（默认）、水平向左、垂直向下、垂直向上
- 主轴对齐方式：起始对齐（左对齐）、结束对齐（右对齐）、居中对齐、等边距对齐、两端对齐、等间隔对齐
- 交叉轴对齐方式：顶部对齐、居中对齐、底部对齐
- 左右边距：修改控件之间的间距大小
- 控件实际范围：显示/隐藏布局控件的虚拟边框
- 子控件实际范围：显示/隐藏子控件的虚拟边框
注意：布局是一个虚拟控件，将其他控件添加进布局控件以实现弹性布局，加入布局的控件位置坐标将会失效。
layout component
3.29 线图
线图为图表控件之一，可以用于生成曲线图、柱状图、折线图、散点图。
可更改的样式属性：
- 宽度高度：通过定义不同的宽度高度或拖动边缘调整线图大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 背景：修改线图的背景颜色
- 透明度：更改线图显示的透明度
- 隐藏：可以在画布中隐藏/显示元件
- 刷新：重新刷新生成线图
- 位置锁定：在画布中锁定/解锁线图
- 横坐标反转/纵坐标反转：将图表的沿X/Y轴方向反转
- 自适应最值：勾选后控件原点终点会根据实际坐标集数据自动调整
- 横坐标设置/纵坐标设置：设置原点值和终点值
- 边框线宽/颜色/透明度：修改图表的边框样式
- 水平跨度/垂直跨度：修改标尺网格的宽度/高度值
- 标尺线宽/颜色/透明度：修改标尺线的样式
- 新增线：添加/删除线类型（散点、折线、曲线、柱状图）、坐标集、线宽、颜色等
- 坐标集设置：添加/删除坐标集及坐标点
- 显示图钉：勾选之后显示折线的节点
line chart component
line chart display
player component
3.30 播放器
播放器控件属于高级控件之一。该控件在上位机屏幕上添加，在下位机实现视频播放/暂停、进度条等功能。
可更改的样式属性：
- 宽度高度：通过定义不同的宽度高度或拖动边缘调整播放器大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 透明度：更改播放器的透明度
- 总时长：设置视频的总时长
- 当前进度：设置视频的当前播放时间
- 播放事件：设置视频的函数名和执行函数，设置在播放视频瞬间执行当前相关代码
- 进度条改变事件：设置进度条的函数名和执行函数，在拖动进度条时进度值变化执行相关代码
- 停止播放事件：设置视频播放暂停的函数名和执行函数
line chart display
player component
player pc display
player embedded display
dropdown component
dropdown properties
3.31 下拉框
下拉框控件属于图表控件之一。该控件可以点击展开和隐藏选项列表，在列表中添加选项等功能。
可更改的样式属性：
- 宽度高度：通过定义不同的宽度高度或拖动边缘调整下拉框大小
- 坐标：通过定义不同的XY值或键盘↑↓←→键来调整控件位置
- 字体颜色：修改列表上显示的文本的字体颜色
- 字集：修改列表上文本内容使用的字体
- 对齐：对文字进行位置对齐调整，如居中、左对齐、右对齐等
- 字体风格：添加文字风格，如下划线、删除线、粗体、斜体
- 透明度：更改下拉框的透明度
- 选项高度：修改选项的高度值
- 添加item：往列表中添加item并可自定义文本内容
- 隐藏：可以在画布中隐藏/显示元件
player pc display
player embedded display
dropdown component
dropdown properties