本原创文章帖发布在华为开发者联盟社区，欢迎开发者前往访问评论交流，更多与该内容相关讨论，请点击原帖查看：

Pura X View 阔直板来了｜阔直板 & 折叠屏应用 UI 适配典型场景与通用开发指南-华为开发者话题 | 华为开发者联盟

随着鸿蒙生态持续演进，形态丰富的新型手机设备相继落地，极大的拓展了应用设计与开发的边界。如新上市的 Pura X View 阔直板， 以及阔折叠、双折叠形态设备，在屏幕比例、可视范围与交互体验上均区别于传统直板手机。用户开合设备、使用分屏时，应用界面需完成相应的视觉与交互动态适配，从而让消费者在不同设备形态下都能获得更顺畅、更一致的使用体验。

同时以 Mate XT 为代表的三折叠设备，将硬件形态多样性推向新高度，支持单折、双折、完全展开等多档物理姿态，覆盖更多元的使用场景。应用除流畅适配基础折展状态与横竖屏切换外，更需在多重折叠临界点实现精准的界面自适应、UI 分栏布局与任务无缝接续，对应用适配能力提出了更高要求。

本文旨在帮助开发者高效完成鸿蒙应用 UI 适配，建议重点关注登录、搜索、拍摄等核心操作的多场景兼容，保障分屏、内外屏切换、折叠状态切换及软键盘、摄像头调用时的交互体验，平稳应对横竖屏切换、特殊布局与设备姿态变化。

为便于快速定位和解决问题，本文提炼了折叠屏和阔屏适配中最常见的场景问题，并提供了对应的解决方案：

UI 适配场景及通用指南

场景一、控件被截断，关键操作不可见或不可点击

以不同屏幕尺寸场景为例，部分页面在显示区域缩小时，可能出现内容截断、底部按钮不可见、弹窗显示不全等问题，可能影响功能操作体验。

可能原因

页面仅按全屏尺寸进行适配，未充分考虑窗口缩小后的布局变化

内容区未采用可滚动容器，窗口缩小时无法继续浏览

关键按钮、确认区、关闭区被固定在不可见区域

弹层、自定义面板未设置合理的尺寸约束，在受限窗口中超出可显示区域

最小适配建议

1. 内容区优先使用可滚动容器或列表类组件，例如 Scroll、List、WaterFlow，让原先不可见的内容可以通过滑动查看；

2. 优先压缩非核心展示区域，保证提交、确认、关闭、下一步等关键操作始终处于可见可点区域；

3. 避免在受限窗口中依赖固定高度、固定宽度布局，优先使用可伸缩、自适应布局；

4. 对弹层、抽屉、半屏页增加尺寸约束，必要时在弹层内部增加滚动能力；

建议优先检查的页面

页面存在固定高度布局的组件

应用开屏页或隐私协议与授权确认页面

【查看参考文档】：

Scroll容器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll

List列表组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list

WaterFlow容器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow

场景二、软键盘弹出后，输入框或发送 / 确认按钮被遮挡

在编辑、评论等输入场景中，软键盘弹出后，输入框、底部操作区、发送按钮或确认按钮被遮挡。

可能原因

系统默认避让策略只能优先保证当前输入框不被遮挡，无法自动保证底部操作区始终可见

页面内容区没有根据可视区域变化动态收缩

页面中存在大量固定高度组件，导致压缩后布局无法自然调整

页面缺少软键盘高度监听和可视区域变化处理

最小适配建议

1. 对输入、表单、编辑类页面，可优先评估使用压缩避让模式，并结合页面可伸缩布局及可视区域变化处理。

2. 页面内容区尽量采用可伸缩或自适应高度布局，避免关键区域使用固定高度。

建议优先排查的页面

搜索页

登录页 / 注册页

发布页 / 表单填写页

【查看参考文档】

软键盘布局适配：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layout-adapt

场景三、大屏展开后仍沿用小屏布局，界面信息密度和操作效率偏低

以双折叠、三折叠场景为例，应用在展开态界面使用的是放大版的直板机界面，导致部分场景显示内容减少，原本一屏可见的内容，在更大的屏幕上却看不到了。

常见表现

大屏下仍是单列信息流，左右大面积留白

列表、详情、评论区、相关推荐等内容没有分栏

页面元素整体放大，但信息密度没有提升

建议优化方向

1. 避免把大屏适配简单处理为“整体放大”；

2. 按窗口宽度、方向和页面类型进行重排，优先基于断点而不是固定机型做适配；

3. 对首页、频道、列表、详情、设置、阅读等页面，优先评估双栏、多栏或主次分区布局；

4. 可结合分栏布局、重复布局、挪移布局、缩进布局等响应式方式，提高大屏场景下的信息密度和操作效率；

5. 对展开态、方屏、宽屏等不同窗口比例分别验证，避免只是“放大界面”而没有提升展示效率。

【查看参考文档】

页面布局响应式变化–横屏大屏：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-screen-layout#section6493354468

页面布局响应式变化–大屏竖屏：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-screen-layout#section86231545125515

大屏应用UX体验标准：https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-large-screen-0000001807707561

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

页面布局场景：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-page-layout

折叠屏的设计指南：https://developer.huawei.com/consumer/cn/doc/design-guides/foldable-0000002352875141

场景四、横竖屏 / 全屏切换后，界面不跟随、布局异常或恢复不正确

在大屏使用时，用户调整握持方向后，页面未响应方向变化；或者发生了旋转，但布局错乱、控件错位、字号异常，退出后页面状态恢复不正确。

建议优先排查

旋转后页面是否仍然可用，而不只是“能不能转”

是否出现黑边、拉伸、控件错位

进入全屏、退出全屏、方向切换三条路径是否都正常

标题栏、底部操作区、弹层、菜单在旋转后位置是否正确

建议优化方向

1. 把横竖屏 / 全屏切换看成一次完整的窗口变化，而不是单纯的方向变化；

2. 通过窗口尺寸变化能力监听切换过程，及时调整布局、子窗尺寸和关键控件位置；

3. 页面布局优先采用响应式规则，避免旋转后仍沿用切换前的固定尺寸和固定位置；

4. 对全屏进入、全屏退出、方向切换后的状态恢复分别验证，确保阅读位置、播放状态、操作区显示都能正确延续。

【查看参考文档】

窗口方向实践指南：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-direction

横竖屏切换典型问题：https://developer.huawei.com/consumer/cn/doc/architecture-guides/educate-v1_1-ts_c4-0000002313120312

响应式布局：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout

场景五、窗口切换或形态变化过程中，界面布局错位、字号图标突变

在窗口大小切换、小屏切大屏、大屏切小屏、多窗口恢复全屏等过程中，页面布局错乱，字号、图标、间距、宫格数发生明显突变，影响连续使用体验。

建议优先排查

页面是否只在初始化时读取一次窗口信息

响应式布局规则和断点切换逻辑是否清晰

字号、间距、图标尺寸是否随窗口变化同步调整

是否出现整页闪动重建，而非平滑重排

建议优化方向

1. 不要只在页面初始化时取一次窗口参数，应在窗口变化过程中持续响应；

2. 窗口变化连续优先基于统一的响应式断点实现，而不是为每一种折叠状态单独硬编码；

3. 基于窗口尺寸变化和断点刷新 UI，避免仅调整容器尺寸而导致字体等视觉元素在不同形态下表现不一致；

4. 尽量做到平滑重排和状态延续，避免开合后页面跳转、任务中断、整页闪动重建；

5. 对窗口大小变化、恢复全屏、多窗口切换等路径分别验证连续性。

【查看参考文档】

开合接续设计指南：https://developer.huawei.com/consumer/cn/doc/design-guides/trifold-0000002352915021#section1333601804219、https://developer.huawei.com/consumer/cn/doc/design-guides/foldable-0000002352875141#section5560057912

适配应用开合连续：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide#section186893019118

场景六、在展开态或横屏场景下，方向类应用可能出现角度偏移或指向错误

在展开态或横屏大屏等默认显示方向发生变化的场景下，指南针、地图朝向、AR指向等依赖方向传感器的应用可能出现方向偏移、指针指向不准、显示角度异常等问题，影响方向判断和使用体验。

​可能原因

不同设备形态下，屏幕默认方向存在差异，传感器坐标系与屏幕坐标系不一致

应用仅按手机竖屏场景处理方向数据，未针对横屏或大屏形态做方向补偿

在折叠 / 展开、横竖屏切换等过程中，未根据当前方向重新校正传感器显示结果

最小适配建议

1. 处理方向传感器数据时，结合当前屏幕旋转角度或显示方向，对方向传感器结果做补偿；

2. 不要默认沿用手机竖屏下的方向换算逻辑，应根据横屏、大屏、展开态等场景重新校正显示角度；

3. 对折叠态、展开态、横竖屏切换等路径分别验证方向显示是否正确；

建议优先排查的页面

指南针类页面

地图导航 / 朝向指示页面

AR指引类页面

依赖方向传感器的运动、游戏类页面

【查看参考文档】

方向偏移或指向错误类问题方案：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_c91-0000002430270561

模拟器与远程真机调测

开发者可以借助直板机应用分屏功能，先检查不同窗口大小下的适配效果；也可以通过真机或远程真机，查看 Pura X 内屏、Mate X 系列、Mate XT 等折叠屏设备上的实际显示效果。

远程真机调试：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/redirectToService?menuId=92495191845 96051206&type=project

模拟器使用指引：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-emulator-create

最小走查清单（建议必查）

首页 / 主页面：检查显示完整性、布局稳定性、功能入口和按钮可达性。

核心链路：检查登录、搜索、支付、发布、播放等关键流程是否存在遮挡、错位或中断。

形态切换：检查折叠态 / 展开态、内外屏切换后，页面是否正常重排，状态是否连续保留。

多窗口 / 分屏：检查缩放、分栏及恢复全屏后，内容和关键操作是否仍可见可点。

横竖屏 / 全屏：检查沉浸场景在方向切换和全屏切换后的布局与恢复状态。

键盘 / 弹窗 / 浮层：检查键盘遮挡、弹窗可操作性以及浮层位置是否正常。

附：官方文档资源

折叠屏应用开发：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide

Pura X阔折叠应用开发：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-purax-guide

三折叠应用开发：https://developer.huawei.com/consumer/cn/do c/best-practices/bpta-matext-guide

多设备界面设计：https://developer.huawei.com/consumer/cn/doc/design-guides/design-principles-0000001957023989

多设备开发最佳实践：https://developer.huawei.com/consumer/cn/best-practices/multidevice/

多窗口适配：https://developer.huawei. com/consumer/cn/doc/best-practices/bpta-multi-device-window-mode

软键盘避让：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layou t-adapt

多设备适配屏幕差异：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-screen-diff

希望本指南能助您高效完成折叠屏手机适配，欢迎分享交流您的适配实践、遇到的问题及解决思路，期待与您共同为用户带来更流畅、一致的使用体验！