关键方法

优化
FactoryTalk® Optix
应用程序需要在性能、可维护性和清晰度之间进行精细的平衡。在本文档中,我们将探讨实现这一平衡的关键方法,例如:
  • 方法类型
  • 方法用例
  • 如何高效地实现每种方法
这些概念最初来自 Web 设计和跨平台应用程序领域,但现在在工业 HMI 中也必不可少,因为相同的应用程序可以显示在不同的设备上。
  • 可扩展方法:
    界面上的可扩展方法包括在不考虑设备分辨率的情况下按比例调整大小,同时保持布局、定位和可读性。
    例如:在 1920×1080 设计的布局,同样也正确地适应 1280×720 或 3840×2160。
  • 自适应方法:
    界面上的自适应方法包括根据设备或分辨率调整其布局,并相应加载不同的结构。
    例如:一个仪表板在平板电脑上表现为紧凑,而在工业平板电脑上则表现为扩展。
  • 响应式方法:
    界面上的响应式方法会根据可用空间实时重新排列内容,无需切换页面。
    示例:在调整窗口大小时,网格从 4 列变为 2 列。

每种方法的使用时机

下表显示了每个界面场景的推荐方法:
场景
推荐方法
实施过程
分辨率不同但布局相同
可扩展
针对每个设备优化布局
自适应
在同一页面内灵活布局
响应式

实施可扩展方法

使用容器的对齐属性,可以在
FactoryTalk® Optix
中轻松实现可扩展性。
提醒事项: 请参见配置缩放布局
例如,要创建标头,请使用
面板
对象并将其水平对齐方式设置为
拉伸
。这可确保无论最终分辨率如何,对象都跨越整个可用宽度。
重要提示:
为容器对象分配固定大小,会导致界面无法适配不同屏幕分辨率的缩放需求。因此,请仅在必要时分配固定大小。
大小
结果
800px
1280px
小贴士: 将容器对齐方式设置为
拉伸
,以允许根据分辨率自动分配空间。即使应用程序是以固定分辨率开发的,元素也会在运行时缩放以适应其容器。
大小
结果
800px
1280px

实施自适应方法

当针对截然不同的分辨率(例如 1920x1080 与 480x272)进行设计时,必须创建单独的布局。使用
面板加载器控件
可根据分辨率动态加载不同的布局。
要确定画面分辨率,请使用
MainWindow
宽度
高度
属性。将这些属性的
更改建模规则
设置为
强制的
可确保这些值在运行时可用。
重要提示:
更改建模规则
功能仅供高级用户使用。只有在
FactoryTalk Optix Studio 选项
面板中激活
高级模式
后,您才能查看此功能。
将此功能的使用限制到此特定范围,可避免出现任何意外行为。
小贴士: 一个好的做法是在
MainWindow
中的辅助变量里存储计算值,尤其是当它们在多个地方使用时。这样可以避免重复创建由多个转换器组成的
复杂动态链接
,从而减少节点计数并提高性能。

实施响应式方法

除了使用
面板加载器
外,条件可见性也是响应式设计的关键。例如,只有超过特定画面宽度时才可能显示侧边菜单,而低于该阈值则显示切换按钮。
网格布局
对于动态排列内容至关重要。它允许定义行数和列数。
您还可以通过在
属性
面板内将
对齐方式
属性设置为
活动
,以使用
垂直布局
水平布局
功能。
警告: 这可能会导致布局溢出。在这种情况下,请将
网格布局
包裹在
滚动视图
中以保持完全可见性。
小贴士: 请参见配置网格布局
提供反馈
对本文档有问题或反馈吗? 请在这里提交您的反馈
Normal