双折叠应用开发

产品硬件说明

本章以Mate X5产品为例，介绍双折叠的屏幕方向、屏幕尺寸以及相机硬件参数等信息。

屏幕规格信息

折叠态屏幕规格信息

展开态屏幕规格信息

相机硬件信息

双折叠有默认的相机镜头安装角度，在使用时需要考虑镜头角度和设备的旋转角度，具体定义可参考预览旋转角度。双折叠相机前置和后置镜头角度以及需要设置的预览流旋转角度如下，折叠态和展开态下的相机参数一致。

折叠态相机硬件信息

展开态相机硬件信息

设备折叠能力

双折叠具备独特的折叠功能，在不同折叠状态下展现出不同的特性。

通过display.isFoldable()接口可判断设备是否支持折叠，若支持则返回true，否则返回false。通过display.getFoldStatus()接口可获取折叠设备当前的折叠状态，返回结果可参考FoldStatus。下表以Mate X5产品为例，展示了双折叠的折叠状态和属性。

小折叠硬件说明

概述

相对于直板机，小折叠有以下特点：

• 具有特殊的折叠状态和交互事件。包含三种状态：折叠态，展开态和悬停态。
  • 展开态：小折叠完全展开后的形态。形态为直板机。
  • 折叠态：小折叠折叠后的形态。折叠后屏幕尺寸很小，有一定的交互空间。
  • 悬停态：小折叠处于完全展开和折叠的中间状态，可平稳放置。

小折叠目前共有两款产品，Pocket系列和Nova Flip系列，示意图如下。

设备折叠能力

通过display.isFoldable()接口可判断设备是否支持折叠，若支持则返回true，否则返回false。通过display.getFoldStatus()接口可获取折叠设备当前的折叠状态，返回结果可参考FoldStatus。下表以Pocket系列产品为例，展示了小折叠的折叠状态和属性。

创新与体验提升

交互跟手

双折叠展开态拥有更宽广的显示视野，信息承载量更大，用户可操作范围也更广。为进一步提升双折叠的使用体验，建议适配系统全新交互能力，通过接入智感握姿、跟手弹窗和跟手半模态等新特性，让用户操作更快捷、高效。

1. 智感握姿：系统提供感知用户当前握持手信息的能力，应用可依据获取的手部信息，自适应调整核心交互组件的显示位置，有效提升用户单手操作便捷性。

   

   通过订阅握持手状态变化感知事件motion.on('holdingHandChanged')，获取到握持手信息后，更改组件的显示位置。

2. 跟手弹框：为了减少用户操作路径过长的情况，在折叠态和展开态可通过跟手弹窗进行展示，弹出框的弹出位置离手更近，以便用户能够快速操作。

   

   构建UI布局时，可通过条件表达式判断：当横向断点为sm时，使用普通居中弹框；否则，使用跟手弹框PopoverDialog，提升大屏设备的操作效率。

3. 跟手半模态：在折叠态，半模态窗口通常从屏幕底部弹出；在展开态，可以考虑跟手半模态窗口或者居中半模态窗口显示，具体根据业务需要选择。

   

   使用bindSheet绑定半模态转场时，设置半模态属性preferType为SheetType.POPUP。设置该属性后，窗口宽度小于600vp的设备将默认显示底部弹窗，其他设备则自动适配为跟手弹窗。

悬停态适配

双折叠展开态时可切换至悬停态。悬停态支持设备平稳放置于桌面，实现免手持体验，常用于视频通话、视频播放、拍照、听歌等不需要频繁交互的场景。这种状态下，应用需要对中间折痕区域进行避让，并对上下两个界面进行悬停态布局适配。悬停态的实现方案可参考折叠屏悬停态。

开合适配

开合连续指应用在屏幕形态与窗口状态切换时，保持页面内容连贯，延续任务进度与运行状态。支持用户快速接续切换前的操作，打造流畅的切换体验。例如双折叠设备在折叠态和展开态之间切换时，应用页面内容保持不变、状态无缝接续，保障使用体验不受影响。具体实现方案，可参考开合连续章节。

悬浮组件

在双折叠设备上，可以借助HdsTabs组件的barFloatingStyle属性实现悬浮导航栏，可适配各类形态切换场景，充分释放屏幕可视区域；通过悬浮材质参数SystemMaterialParams配置透明磨砂材质效果，提升界面通透感，适配沉浸式浏览体验。搭配HdsTabsMiniBar可扩展迷你标签栏，拓展多维度快捷入口，适配展开态的分区操作，同时保障折叠态和展开态下交互逻辑统一，降低用户切换成本，有效提升操作效率与使用体验。

视频自适应沉浸

双折叠设备可以切换折叠态和展开态，且窗口模式可以转换分屏、悬浮窗，为避免视频播放画面在形态切换时出现拉伸、裁剪、显示比例错乱等问题，可采用自适应沉浸全屏播放方案，精简界面元素、减少视觉干扰，让用户聚焦视频画面，充分利用大屏开阔视野，有效提升观看体验。具体实现方案，可参考视频适配不同尺寸屏幕章节。

全景多窗

全景多窗旨在帮助用户高效处理多个任务。通过全景多窗，用户可以突破物理屏幕局限，在同一屏幕内并行运行多款应用，实现应用间快捷切换，提升操作效率。双折叠可依托全景多窗能力，充分利用大屏空间优势，最高支持三个窗口同屏并行运行，助力用户一边浏览资讯、一边编辑内容、一边沟通办公，多任务同步处理、互不冲突，实现办公、娱乐、日常操作一站式协同。

设备常见适配问题

截断/留白

应用启动页面未铺满屏幕或出现异常布局

问题描述：在双折叠展开态启动应用时，应用的启动页面未铺满整个屏幕，出现白屏区域或者启动页面被截断。

解决方案：应用需要配置增强启动页，配置后启动页面中的背景、图片和图标等资源能根据窗口大小自适应填充，保证启动页面在不同设备形态上正常显示，配置中各标签的说明可参考startWindow标签。

如何实现不同折叠状态下的页面布局

问题描述：应用页面布局在不同折叠状态下适配方式不明确或适配出现异常。

解决方案：推荐使用断点适配页面布局。依据不同断点对应的UX设计规范，分别开发对应的页面布局。通过window.on('windowSizeChange')监听页面的断点变化，即可实现不同折叠状态下的页面布局适配，详细开发方案参考断点的开发案例。