Mashup Builder > 混搭 > 响应式混搭 > 在 ThingWorx 9.4 或更高版本 (测试版) 中使用响应式布局内的增强型定位功能
在 ThingWorx 9.4 或更高版本 (测试版) 中使用响应式布局内的增强型定位功能
* 
增强型定位在 ThingWorx 9.4 或更高版本中作为测试功能提供。
基于 Flexbox 的布局通常用于在混搭中创建响应式设计。在先前版本的 ThingWorx 中,静态放置在容器中的项使用绝对定位。在基于 flexbox 的容器内使用绝对定位可能会影响容器及其项的可见性。例如,将响应式小组件添加到扩展比例为 0 且收缩比例高于 1 的容器时,容器可能会在布局中显示为空,因为没有为响应式小组件设置高度或宽度尺寸。将容器配置为收缩而非扩展时,容器可以缩小并变为隐藏状态,因为其项为绝对位置。当小组件在运行时动态展开或折叠时,也会发生此问题。
为解决这些布局问题,在 ThingWorx 9.4 中作为测试版功能提供了柔性容器的增强型定位模式。此模式会覆盖旧版布局中使用的绝对定位,并修复响应式小组件在某些情况下由于容器的扩展和收缩比例值而可能无法正确显示的问题。您可以使用“布局”面板为新混搭和现有混搭启用增强型定位。要针对新混搭默认启用此模式,请选中平台子系统“配置”选项卡上的“启用测试版混搭功能”复选框。
将增强型定位设置为新混搭的默认模式
要在 ThingWorx 9.4 中针对新混搭启用增强型定位功能,请执行以下步骤:
1. 在 Composer 中,单击“浏览”,然后在“系统”下,选择“子系统”。随即列出平台子系统。
2. 打开 PlatformSubsystem 实体。
3. “配置”选项卡上,选中“启用测试版混搭功能”复选框。
* 
启用此选项后,增强型定位功能将自动应用至所有新混搭。
4. 单击“保存”
现已针对新混搭启用增强型定位功能。
禁用现有混搭的旧版定位
要禁用现有混搭的旧版定位,请执行以下步骤:
1. 在 Mashup Builder 中打开任意混搭,选择工作区中的容器或使用“资源管理器”面板对其进行选择。
2. “布局”面板上,将“旧版定位”选项设置为“关闭”
3. 要针对混搭中所有子容器启用增强型定位功能,请单击“应用于子项”
* 
避免在混搭布局中使用旧版和增强型定位模式。
4. 单击“保存”,然后单击“查看混搭”
混搭现在使用增强型定位功能,且已禁用旧版定位模式。增强型定位功能可能需要根据旧版定位的行为对现有布局进行更改。以下各部分列出了使用增强型定位创建或配置布局时要遵循的最佳做法。
审阅布局的提醒消息
禁用旧版定位后,影响小组件可见性的布局配置的提醒消息将显示在 Mashup Builder 的“提醒”面板上。要解决混搭中的这些问题,请查看每条消息并调整混搭中每个容器的布局选项。受影响的容器和小组件的名称将显示在消息中。使用“资源管理器”面板选择容器,然后使用“布局”面板更新布局选项。
指定扩展比例为 0 的响应式小组件的容器大小
某些响应式小组件不具有默认宽度和高度,其大小会随其容器尺寸变化。例如:
在扩展比例为 0、收缩比例大于 1 的容器中禁用旧版定位时,这些小组件可能无法正确显示。在此配置中,布局中的容器不会扩展。要解决此问题,请将容器设置为固定大小或指定大小范围。
* 
在混搭中检测到此配置时,“提醒”面板上会显示一条提醒消息。
指定使用静态定位时的容器大小并将扩展比例指定为 0
如果针对使用静态定位的容器禁用旧版定位,则当扩展比例设置为 0 且收缩比例设置为 1 或更高时,该容器内的内容在运行时可能不会显示。要在布局中显示小组件,必须设置特定高度、指定大小范围或更新容器的扩展比例。当混搭存在此布局问题时,Mashup Builder 中的“提醒”面板上会显示一条提醒消息。设置固定大小会阻止条形图占用显示静态小组件所需的最小空间。
以下示例显示了一个混搭布局,其中包含一个响应式“条形图”小组件和多个静态放置的小组件:
布局分为两个容器,配置如下:
选项
左侧容器
右侧容器 - container-5
容器大小
“响应式”
“响应式”
定位
“响应式”
“静态”
扩展比例
1
0
收缩比例
1
1
因为右侧的容器使用静态定位,所以当运行时可用空间有限时,其内容可能不会显示。可通过为右侧容器指定固定大小或大小范围来解决此问题。
调整菜单栏大小时隐藏栅格滚动条
禁用旧版定位时,调整放置在“栅格”小组件旁边的菜单栏的大小可能会导致栅格上显示水平滚动条。要隐藏滚动条,请使用“布局”面板将大小范围应用于网格容器,并将最小宽度设置为 1 或更高。下图显示了带有“栅格”和“菜单栏”小组件的布局。调整菜单栏大小时,栅格会扩展或收缩以适应可用空间。
这对您有帮助吗?