HarmonyOS 鸿蒙Next基于RN框架的Pura X Max应用适配指南

HarmonyOS 鸿蒙Next基于RN框架的Pura X Max应用适配指南

概述

华为推出的Pura X Max折叠手机，其配有一块宽高比10:14的较宽外屏（折叠态）和一块宽高比14:10的内屏（展开态），相对于直板机，Pura X Max有以下明显特点：

1. 设备屏幕尺寸可变，具有不同大小和形态的窗口。需要针对不同的应用窗口尺寸，做响应式的页面布局适配。
   • 折叠时，外屏屏幕尺寸，较直板机宽度更宽、高度更矮。
   • 展开后，内屏屏幕尺寸接近于平板，对内容的展示面积增大。
2. 具有特殊的折叠状态和交互事件。包含三种状态：折叠态，展开态和悬停态。需保障不同状态下的应用体验一致性（如开合连续性）。
   • 展开态：Pura X Max完全展开后的形态。有更大的屏幕尺寸，可充分显示应用内容。
   • 折叠态：Pura X Max折叠后的形态。折叠后屏幕尺寸变小。
   • 悬停态：Pura X Max处于完全展开和折叠的中间状态。可平稳放置。
3. 设备的折叠态和展开态均配置前置相机和后置相机，但是在不同折叠状态下，可用相机和相机的位置会发生变化。开发相机功能时需考虑摄像头切换与预览流重置。

本文主要内容如下：

1. 硬件说明 ：Pura X Max设备的屏幕与硬件参数详解。
2. 窗口适配 ：不同使用场景下的窗口适配方案。
3. 界面开发 ：典型布局场景和不同使用形态时的布局建议。
4. 交互适配 ：关键交互能力的适配方法。
5. 常见问题 ：适配过程中的典型问题与解决方案。

硬件说明

本章将介绍Pura X Max的屏幕方向、屏幕尺寸、相机硬件参数和折叠状态参数等信息。

屏幕规格属性

以下是Pura X Max在折叠和展开状态下的硬件参数。

折叠态屏幕规格信息

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
折叠态示意图
屏幕方向 Orientation	竖屏PORTRAIT	横屏LANDSCAPE	反向竖屏PORTRAIT_INVERTED	反向横屏LANDSCAPE_INVERTED
屏幕ID	0	0	0	0
分辨率（px）	1264*1848	1848*1264	1264*1848	1848*1264
分辨率（vp）	459*672	672*459	459*672	672*459
横纵断点	横向断点sm，纵向断点lg	横向断点md，纵向断点sm	横向断点sm，纵向断点lg	横向断点md，纵向断点sm

展开态屏幕规格信息

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
展开态示意图
屏幕方向 Orientation	竖屏PORTRAIT	横屏LANDSCAPE	反向竖屏PORTRAIT_INVERTED	反向横屏LANDSCAPE_INVERTED
屏幕ID	0	0	0	0
分辨率（px）	1828*2584	2584*1828	1828*2584	2584*1828
分辨率（vp）	664*939	939*664	664*939	939*664
横纵断点	横向断点md，纵向断点lg	横向断点lg，纵向断点sm	横向断点md，纵向断点lg	横向断点lg，纵向断点sm

相机硬件信息

相机有默认的相机镜头安装角度，在使用时需要考虑镜头角度和设备的旋转角度，具体定义可参考预览旋转角度。

折叠态相机硬件信息

Pura X Max折叠态配置前置相机和后置相机，前置和后置相机镜头安装角度以及需要设置的预览流旋转角度如下：

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
折叠态示意图
后置相机镜头安装角度	90度	90度	90度	90度
后置相机预览流旋转角度	90度	180度	270度	0度
前置相机镜头安装角度	270度	270度	270度	270度
前置相机预览流旋转角度	270度	0度	90度	180度

展开态相机硬件信息

Pura X Max展开态配置前置相机和后置相机，前置和后置相机镜头安装角度以及需要设置的预览流旋转角度如下：

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
展开态示意图
后置相机镜头安装角度	90度	90度	90度	90度
后置相机预览流旋转角度	90度	180度	270度	0度
前置相机镜头安装角度	270度	270度	270度	270度
前置相机预览流旋转角度	270度	0度	90度	180度

设备特有能力

Pura X Max设备为折叠屏设备，有着独特的折叠能力，在不同的折叠状态下有着不同的折叠属性，Pura X Max产品折叠状态和属性如下：

	折叠态	悬停态	展开态
效果图
isFoldable	true
FoldStatus	FOLD_STATUS_FOLDED	FOLD_STATUS_HALF_FOLDED	FOLD_STATUS_EXPANDED
FoldDisplayMode	FOLD_DISPLAY_MODE_MAIN	FOLD_DISPLAY_MODE_FULL	FOLD_DISPLAY_MODE_FULL

窗口适配

适配设备窗口模式

当前Pura X Max设备支持的窗口模式有全屏窗口模式、分屏窗口模式以及悬浮窗口模式，各模式的详细信息见窗口模式。

鸿蒙系统赋能应用可以多窗口形态运行，为确保全场景下的体验，建议开发者使用窗口尺寸适配策略，通过监听窗口状态变化，实现界面布局的动态响应与实时重构。

全屏

Pura X Max上的应用启动时默认全屏模式。

分屏

分屏一般用于两个应用长时间并行使用的场景，例如边看购物攻略边购物的场景；应用也可以主动实现应用内分屏。Pura X Max的展开态和折叠态均支持分屏，分屏时的窗口尺寸、断点等信息如下表所示，具体适配信息请参考分屏窗口模式适配：

悬浮窗

悬浮窗一般用于阅读新闻资讯、购物等场景，Pura X Max设备的展开态和折叠态均支持悬浮窗，悬浮窗的窗口尺寸、断点等信息如下表所示，具体适配信息请参考悬浮窗口模式适配：

应用进入悬浮窗模式时，默认以小悬浮窗显示；用户点击后，悬浮窗放大至大悬浮窗状态。上表所列参数均为放大后的悬浮窗口尺寸。

适配设备显示方向

可以通过设置窗口旋转策略（orientation）的方式控制应用的显示方向。窗口旋转策略（orientation）与屏幕旋转角度的关系请参考窗口的Orientation和屏幕rotation的关系。Pura X Max开发的横竖屏旋转策略以及适配方案可参考窗口方向。

折叠态设备显示方向

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
折叠态示意图
默认窗口旋转策略（ Orientation ）	未定义UNSPECIFIED	未定义UNSPECIFIED	未定义UNSPECIFIED	未定义UNSPECIFIED
表现形式	竖屏PORTRAIT

展开态设备显示方向

屏幕旋转角度（ rotation ）	0（0度）	1（90度）	2（180度）	3（270度）
展开态示意图
默认窗口旋转策略（ Orientation ）	未定义UNSPECIFIED	未定义UNSPECIFIED	未定义UNSPECIFIED	未定义UNSPECIFIED
表现形式	AUTO_ROTATION_RESTRICTED：跟随传感器自动旋转，可以旋转到竖屏、横屏、反向竖屏、反向横屏四个方向，且受控制中心的旋转开关控制

表格中的参数表示屏幕属性中顺时针旋转角度（rotation）对应的窗口旋转策略。

建议应用在适配Pura X Max展开态界面时，推荐支持横竖屏自动旋转，以提供更灵活、自然的使用体验。展开态界面有足够的空间，无论横屏或竖屏，窗口均能提供充足的显示区域，确保布局自然适配、内容清晰可读，具体适配逻辑可参考兼容多设备上的旋转策略。

Pura X Max设备推荐的旋转逻辑如下：

适配设备沉浸式

沉浸式模式是指通过减少无关元素的干扰，使应用界面更加专注于内容呈现，以提升用户体验的设计模式，详情可参考窗口沉浸式的实现沉浸式效果章节。

Pura X Max设备使用过程中避让区会发生变化，例如：设备旋转导致横竖屏切换，像这种设备使用状态变化引起避让区的变化的适配方案可参考避让处理。

在下面几种场景中避让区会发生变化：

• 窗口模式切换（全屏/悬浮窗/分屏）。
• 窗口方向变化（横竖屏切换）。
• 折叠屏状态切换（展开/折叠）。

界面开发

典型布局场景

Pura X Max设备上典型的响应式布局方式有分栏布局、重复布局、挪移布局和缩进布局。应用可以利用不同的UI组件和断点来实现多样的布局，从而打造丰富的布局场景。

响式布局方式	典型布局场景	实现方案	折叠态效果	展开态效果
重复布局	列表布局	FlatList 组件 +断点
	瀑布流布局	Flash-List 组件 +断点
	轮播布局	Swiper 组件 +断点
	网格布局	FlatList 组件 +断点
分栏布局	侧边栏	SideBarContainer 组件 +断点
	单/双栏	NavigationSplitContainer 组件 +断点
挪移布局	插图和文字组合布局	GridRow/GridCol 组件 +断点
	底部/侧边导航	Flex 组件 +断点
缩进布局	单列列表布局	GridRow/GridCol 组件 +断点

上述典型布局场景的实现方式可参考页面布局场景。复杂的分栏布局，例如单双栏形态变化时的路由跳转，可参考分栏布局。

设备悬停态适配建议

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

交互适配

Pura X Max设备的交互方式为触控屏，常见的操作有点击、双击、长按、拖拽、滑动等，应用可根据这些操作进行功能适配，详情可参考多设备交互。

Pura X Max设备搭载手写笔，支持无感连接与低延迟传输，开盒即用，适用于全局批注、提笔速记及按键遥控等功能场景，实现流畅自然的书写与交互体验。系统提供的Pen Kit能力，开发者可灵活接入手写套件、全局取色、一笔成形等接口，提升书写交互的扩展性与创作效率。

常见问题

区分Pura X Max设备外屏与直板机

问题现象：Pura X Max设备外屏（折叠态）和直板机处于同一断点区间，当业务场景需要针对两款设备做对应适配时，需要区分。

解决方案：在横向断点为sm，纵向断点为lg时，可通过额外判断宽高比是否大于9/18，来区分直板机与Pura X Max设备外屏，针对Pura X Max设备折叠态单独做个性化适配。

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

问题现象：应用页面布局在不同折叠状态下不知道如何适配或适配有问题。

解决方案：推荐使用断点进行页面布局的适配，根据不同断点下页面布局的UX设计，开发不同断点下的页面布局，实现方法可参考通过断点刷新UI。