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

HarmonyOS 鸿蒙Next基于Flutter框架的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. 设备的折叠态和展开态均配置前置相机和后置相机，但是在不同折叠状态下，可用相机和相机的位置会发生变化。开发相机功能时需考虑摄像头切换与预览流重置。

Pura X Max折叠与展开示意

本文主要内容如下：

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

硬件说明

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

屏幕规格属性

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

折叠态屏幕规格信息

屏幕旋转角度（ rotation ） 0（0度） 1（90度） 2（180度） 3（270度）
折叠态示意图 折叠态示意图 0度 折叠态示意图 90度 折叠态示意图 180度 折叠态示意图 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度）
展开态示意图 展开态示意图 0度 展开态示意图 90度 展开态示意图 180度 展开态示意图 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度）
折叠态示意图 折叠态相机示意图 0度 折叠态相机示意图 90度 折叠态相机示意图 180度 折叠态相机示意图 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度）
展开态示意图 展开态相机示意图 0度 展开态相机示意图 90度 展开态相机示意图 180度 展开态相机示意图 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的展开态和折叠态均支持分屏，分屏时的窗口尺寸、断点等信息如下表所示，具体适配信息请参考分屏窗口模式适配：

设备状态 分屏方式 旋转状态 分屏比例 分屏窗口尺寸(vp) 分屏窗口断点
折叠态 上下分屏 竖屏 1:1 459*312 横向断点sm，纵向断点sm
1:2 459*208 横向断点sm，纵向断点sm
2:1 459*416 横向断点sm，纵向断点md
展开态 左右分屏 横屏 1:1 465*664 横向断点sm，纵向断点lg
1.4:1 543*664 横向断点sm，纵向断点lg
1:1.4 388*664 横向断点sm，纵向断点lg
上下分屏 竖屏 1:1 664*445 横向断点md，纵向断点sm
2:1 664*593 横向断点md，纵向断点
1:2 664*296 横向断点md，纵向断点sm

分屏效果示意图

悬浮窗

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

设备状态 悬浮窗类型 悬浮窗口尺寸(vp) 悬浮窗口断点
折叠态 纵向悬浮窗 459*672 横向断点sm，纵向断点lg
横向悬浮窗 459*258 横向断点sm，纵向断点sm
展开态 纵向悬浮窗 459*750 横向断点sm，纵向断点lg
横向悬浮窗 459*258 横向断点sm，纵向断点sm

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

悬浮窗效果示意图

适配设备显示方向

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

折叠态设备显示方向

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

展开态设备显示方向

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

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

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

旋转策略适配示意图

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

设备状态 窗口全屏时尺寸（vp） 系统是否默认支持横竖屏旋转
折叠态 459*672 否
展开态 939*664 是

适配设备沉浸式

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

沉浸式模式示意图

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

避让区变化示意图

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

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

界面开发

典型布局场景

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

响式布局方式 典型布局场景 实现方案 折叠态效果 展开态效果
重复布局 列表布局 flex布局+断点 折叠态-列表布局 展开态-列表布局
瀑布流布局 flutter_staggered_grid_view +断点 折叠态-瀑布流 展开态-瀑布流
轮播布局 PageView + 断点 折叠态-轮播 展开态-轮播
网格布局 grid + 断点 折叠态-网格 展开态-网格
分栏布局 侧边栏 CustomScrollView + 断点 折叠态-侧边栏 折叠态-侧边栏 展开态-侧边栏
单 / 双栏 Column + 断点 折叠态-单/双栏 展开态-单/双栏
挪移布局 插图和文字组合布局 Flex布局 + 断点 折叠态-图文组合 展开态-图文组合
底部 / 侧边导航 Flex组件+断点 折叠态-导航 展开态-导航
缩进布局 单列列表布局 Center组件+断点 折叠态-单列列表 展开态-单列列表

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

设备悬停态适配建议

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。


更多关于HarmonyOS 鸿蒙Next基于Flutter框架的Pura X Max应用适配指南的实战教程也可以访问 https://www.itying.com/category-92-b0.html

4 回复

赞

更多关于HarmonyOS 鸿蒙Next基于Flutter框架的Pura X Max应用适配指南的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


适配了

在鸿蒙Next上使用Flutter框架适配Pura X Max，需使用OpenHarmony兼容的Flutter SDK。关键在于处理大屏或折叠屏布局：通过MediaQuery获取屏幕尺寸，利用LayoutBuilder实现自适应UI。注意状态栏与安全区域适配，并正确处理输入法弹出。涉及原生能力时，使用MethodChannel桥接鸿蒙API。

针对HarmonyOS Next上基于Flutter的Pura X Max适配，核心在于响应式布局和状态管理。设备在不同折叠状态（folded/expanded）和旋转方向下，窗口尺寸有显著变化（如折叠态外屏横向断点sm，展开态内屏横向断点lg）。适配不需要针对特定设备型号硬编码，应该基于窗口尺寸和断点进行判断。

1. 布局适配策略 在Flutter中，使用MediaQuery获取窗口尺寸，结合断点系统动态调整布局。例如，在列表场景中，根据窗口宽度切换列数：

Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  int crossAxisCount = width > 600 ? 3 : 2; // 600vp为md/lg断点边界
  return GridView.count(
    crossAxisCount: crossAxisCount,
    children: // ... items
  );
}

对于分栏布局，如侧边栏，可根据是否为展开态决定同时显示或导航切换：

bool isExpanded = width > 840; // 展开态宽度阈值
return Row(children: [
  if (isExpanded) NavigationRail(...), // 常驻侧边栏
  Expanded(child: content),
  if (!isExpanded) bottomNavigationBar, // 折叠态用底部导航
]);

2. 窗口与状态适配 折叠状态变化通过display.on('foldStatusChange')监听，在Flutter中需封装为Stream。状态变化时重建UI，确保沉浸式避让区（如状态栏、导航栏）正确设置WindowInsets。

3. 相机开发适配 不同折叠状态下前置/后置相机物理位置和预览流旋转角度要求严格（如折叠态后置预览流需旋转90°），必须在CameraController初始化时根据设备状态和display.orientation动态计算并设置旋转角度，避免预览画面上下颠倒或比例错误。

总体而言，利用Flutter的响应式Widget和状态管理，将所有布局、交互逻辑与断点/窗口尺寸绑定，就能平滑适配Pura X Max的各种形态。

回到顶部