【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模块进行的组件数值写入与读取操作,本质上仍然是对网络变量的访问与控制,仅在使用方式上对绑定过程进行了封装与优化。

相关推荐
智行众维9 小时前
【实践笔记】轮速传感器故障注入:从物理层到数据链路层的全栈测试验证
仿真测试·制动系统·故障注入·四通道车载轮速故障模拟器·轮速传感器·车载功能安全测试·硬件在环测试
qcx239 小时前
Warp源码深度解析(二):自研GPU UI框架——WarpUI的ECH模式与渲染管线
人工智能·ui·设计模式·rust
qq_452396239 小时前
第十六篇:《如何高效维护UI自动化测试用例:避免“维护地狱”》
ui·自动化·测试用例
十五年专注C++开发10 小时前
CMake基础: Qt之qt5_wrap_ui
开发语言·c++·qt·ui
jf加菲猫10 小时前
第16章 容器类
开发语言·c++·qt·ui
ZC跨境爬虫11 小时前
跟着 MDN 学 HTML day_5:(原生table表格语义化搭建+CSS轻量化交互美化全实战)
前端·css·ui·html
John_ToDebug20 小时前
隐于无形,触手可及:Chrome 互动滚动条的六个设计密码
chrome·windows·ui
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html
吴声子夜歌1 天前
Vue3——UI组件库Element Plus(一)
vue.js·ui·elementplus