文档管理中心
您当前正在浏览新版开发者文档中心,目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标,可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题多设备场景一次开发多端部署常见问题应用未适配自由多窗,在平板设备上出现截断、挤压、堆叠等现象

应用未适配自由多窗,在平板设备上出现截断、挤压、堆叠等现象

问题现象

在平板或PC等大屏设备上,在开启自由多窗的情况下,打开应用后,出现页面截断、图片挤压、组件堆叠等现象。

背景知识

问题定位

可以通过检查代码是否监听windowStatusChange事件或是否监听windowSizeChange事件,并且动态调整布局,来判断应用是否适配自由多窗模式。

分析结论

未适配自由多窗模式:未监听windowStatusChange事件或未监听windowSizeChange事件,并且动态调整布局。

修改建议

监听屏幕尺寸变化,并同步动态修改页面组件的布局及尺寸。

  1. 开启窗口模式变化的监听,通过on('windowStatusChange')方法,根据窗口windowStatus发生变化时返回值对应为WindowStatusType来判断当前界面状态,WindowStatusType=4为悬浮窗模式。
  2. 通过getWindowProperties方法返回值中的windowRect获取窗口尺寸,存入AppStorage。使用on('windowSizeChange')方法来监听窗口尺寸的变化。
  3. UI侧通过@StorageLink绑定窗口尺寸后,AppStorage中属性key值对应的数据一旦改变,UI侧会同步修改。通过@StorageLink装饰的数据在窗口尺寸发生变化时会引起组件的重新渲染,可以根据最新的窗口尺寸动态调整应用布局。

具体详细示例可参考应用布局适配智慧多窗的方案。