HarmonyOS 折叠屏设备适配？

Question

折叠屏设备 由于屏幕切换(页面布局无变化)导致的 控件尺寸变化，这个如何适配？

例如，非折叠屏手机/折叠屏手机折叠状态 时的一个 static的固定高度kHeight。在折叠屏手机 展开全屏时，（页面布局不变的情况下）这个高度实际上会等比放大（页面布局不变，宽度变宽，高度等比放大），如何让 页面感知到这个kHeight的变化？有参考案例吗？

Answer 1

折叠屏适配方案包括以下内容：

-手机和折叠屏折叠态，应用需要适配竖屏布局。仅部分特殊场景例如横屏游戏、长视频需要适配横屏布局。当设备尺寸比例接近1:1时，建议横竖屏使用相同或相近的布局；当设备尺寸比例差异大时，横竖屏可以使用不同的布局，从而提供更好的使用体验。

-对于挖孔区的适配，需要考虑核心内容或重要交互不要被挖孔区遮挡。如果被遮挡，则应进行局部内容等避让；可滚动内容无需专门避让挖孔区。要避免因为避让挖孔导致左右侧留白不一致。

-在多端设备上，长视频、直播、会议、通话等场景下支持画中画功能。卡片广告在宽屏设备上建议使用延伸布局和形变进行响应式适配。

-针对折叠屏悬停态（即用户可以将产品半折后立在桌面上），中间弯折区域难以操作且显示内容会变形，因此建议页面内容进行折痕区避让适配。建议上半屏内容由中线向上避让16vp（3毫米）、下半屏内容由中线向下避让40vp（7毫米）。这些是折叠屏设计的主要方案概述。

可参考：

折叠屏UX体验：https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-foldable-screen-0000001807866557

判断折叠状态：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5\#foldstatus10

一多开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/foreword-V5

折叠屏避让：https://developer.huawei.com/consumer/cn/doc/design-guides/responsive-design-overview-0000001746498066\#section127711650854

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-folderstack-V5

可以通过windowSizeChange来监听高度，具体可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5\#onwindowsizechange7