【ETestDEV5教程48】UI设计器之UI画布

ETestDEV是一款面向测试系统的测试软件开发环境,主要应用于嵌入式软件测试、快速原型验证、硬件在环测试、工业自动化测试等场景。本教程针对ETestDEV5的使用方法进行详细说明。若有疑问,欢迎留言。

文章目录

  • [1 画布分辨率设置](#1 画布分辨率设置)
  • [2 主题色调设置](#2 主题色调设置)
  • [3 编辑/预览模式切换](#3 编辑/预览模式切换)
  • [4 画布放大/缩小](#4 画布放大/缩小)
  • [5 UI组件定位使用说明](#5 UI组件定位使用说明)
  • [6 对齐方式](#6 对齐方式)
  • [7 使用图标库](#7 使用图标库)
  • [8 自动绑定网络变量](#8 自动绑定网络变量)

UI画布是所有UI组件的顶层容器,是用于容纳、排列和管理所有用户界面元素的矩形区域;它本质上是一个"绘制表面"或"容器",为UI元素提供了一个统一的坐标系统、渲染顺序和缩放规则;当浏览器加载画布内容时,画布及画布上的UI组件会被渲染成为页面元素。渲染器将UI组件转换为可视化的用户界面,从而通过页面实现人机数据的动态展示和交互。

画布编辑区,是UI设计器用于设计和构建图形界面的核心操作区域。用户在UI设计器视图下,将UI组件库中的UI组件通过拖放操作添加到画布编辑区内,从而实现UI组件在画布上的布局。

画布作为UI组件具有自己的属性,可以配置如下属性:

  • 画布分辨率。
  • 页面主题色调。

UI设计器支持画布视觉设计的操作:

  • 编辑/预览模式切换。
  • 画布放大/缩小。

UI组件在画布上具有两种定位模式:

  • 绝对定位。
  • 相对定位。

1 画布分辨率设置

画布分辨率调整支持通过预设分辨率调整和自定义大小两种方式:

1.选择预设分辨率调整

点击菜单栏"分辨率图标",在弹出菜单中选择要调整的目标分辨率。

2.自定义分辨率

通过修改分辨率旁边的输入框可以自定义UI画布的大小,输入框从左至右分别代表宽、高。

2 主题色调设置

画布支持亮色和暗色两种主题,通过修改属性面板的主题数据,可以切换到相应的主题,如图 8-162、图 8-163所示。

3 编辑/预览模式切换

UI设计器界面打开,画布默认处于编辑模式,可通过菜单栏右上角的预览图标,切换到预览模式;处于预览模式时,可通过点击编辑图标切换到编辑模式。预览模式下,UI呈现真实运行时效果,没有组件库面板和属性面板。

4 画布放大/缩小

点击画布编辑区域右下角的放大/缩小图标,可以对画布及画布内部的UI组件等比例放大或缩小。

5 UI组件定位使用说明

UI组件在画布编辑器中有两种定位方式:绝对定位和相对定位。

  • 绝对定位

绝对定位是一种允许您精确控制元素在容器中位置的方法。在此布局方式下,组件的位置是相对于其父容器(即画布编辑区)的左上角来计算的,不受文档流或其他元素排列的影响。这使开发者能够完全掌控组件在界面上的坐标与层叠关系,实现像素级精准的布局设计。

  • 相对定位

与直接拖到画布不同,当您将组件放入一个(已添加的)面板内部时,它们会采用栅格布局(相对定位)。您可以将其理解为一个无形的网格,组件会像表格一样自动在网格内排列并对齐,从而轻松构建出结构规整的界面。这种布局方式非常适合需要保持一致性和实现响应式设计的应用场景。

6 对齐方式

在UI组件设计中,如果有多个绝对定位的组件,可以通过Ctrl+选中多个组件,然后统一进行左对齐或上对齐; 将多个组件对齐到最左侧组件的位置,或对齐到最顶部组件的位置,使它们的左边缘或上边缘分别对齐,从而实现整齐排列。

7 使用图标库

为提升组件设计的直观性与美观度,您可以为按钮、指示灯等组件配置图标。本软件内置了遵循Material Design规范的图标库,您无需导入或下载资源,仅需在设计中直接引用官方图标名称,即可呈现专业、优雅的视觉表现。

图标库资源请参考:https://mui.com/material-ui/material-icons/。

按钮组件使用图标示例中使用了,图标库里面的"AcUnit":

8 自动绑定网络变量

自动绑定网络变量功能用于简化组件与网络变量之间的绑定配置过程。通过为页面及组件设置统一的别名,在执行脚本中可直接获取组件实例并进行数据读写操作,从而减少人工逐个配置组件绑定网络变量的工作量,提高测试脚本开发效率。

系统支持在脚本中从ui_lib.ui1模块导入页面对应的类实例ui1,并通过组件别名获取具体组件对象,例如:"com = ui1.组件别名",新建组件会自动生成,也支持自定义修改。

获取组件实例后,可通过组件接口函数实现网络变量的数据交互:

  • 使用com.set_text(value)向组件写入数据,同时同步更新对应的网络变量;
  • 使用com.get_text()读取组件当前显示值,获取最新的网络变量状态。

通过该机制,实现了组件操作与网络变量读写之间的自动关联映射,有效简化配置流程,减少人工重复绑定工作,提高系统自动化测试与仿真控制的执行效率。

注意,基于ui_lib.ui1模块进行的组件数值写入与读取操作,本质上仍然是对网络变量的访问与控制,仅在使用方式上对绑定过程进行了封装与优化。

相关推荐
薛定猫AI9 小时前
【深度解析】Gemini Omni 多模态生成与 Agent 化创作工作流:从视频编辑到 UI 生成的技术演进
人工智能·ui·音视频
赏金术士10 小时前
第七章:状态管理实战与架构总结
android·ui·kotlin·compose
幽络源小助理14 小时前
全新UI 阅后即焚V2正式版系统源码_全开源_安全加密传输
安全·ui·开源·php源码
ZC跨境爬虫19 小时前
跟着 MDN 学CSS day_2:(连接样式表与选择器的实战艺术)
java·前端·css·ui·html·媒体
ZC跨境爬虫20 小时前
跟着 MDN 学CSS day_1:(CSS 基石与色彩的艺术)
前端·javascript·css·ui·html
前端若水21 小时前
项目初始化:Vite + React + shadcn/ui
前端·react.js·ui
ZC跨境爬虫21 小时前
模块化烹饪小程序开发日记 Day4:网络层基础设施与接口治理实践
前端·javascript·数据库·ui·html
UI设计兰亭妙微1 天前
兰亭妙微|B端表单设计:UI设计公司中的场景化布局指南,提升用户填写效率
ui·b端界面设计·高端网站设计
颯沓如流星2 天前
前端 UI 组件专业术语科普指南
前端·ui
幽络源小助理2 天前
PS网页版源码_在线Photoshop源码_Nginx免环境部署_支持PSD
nginx·ui·photoshop