【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案

【HarmonyOS Next】鸿蒙应用折叠屏设备适配方案

一、前言

目前应用上架华为AGC平台，都会被要求适配折叠屏设备。目前华为系列的折叠屏手机，有华为 Mate系列（左右折叠，华为 Mate XT三折叠），华为Pocket 系列（上下折叠）。

二、适配方案思路探讨

目前鸿蒙应用适配折叠屏的思路分为两种：分栏和全屏适配。

分栏
在左右折叠手机上，相当于首页一级页面在左边，二级子页面点开后在右边。三折叠上形态未知，有知道的小伙伴可以同步下。
上下折叠手机上，不以分栏的方式呈现，和直板机相似。

单栏（全屏）

全屏适配并且拉伸界面，不进行界面处理。而是处理成平板的UI布局形式，和直板机界面排版不一样。这种适配方案效果最好，但是工作量较大。

不过目前华为官方反馈说以后不演进分栏方案了。三折叠和25年三月新形态手机的适配都是风险。

三、适配方案实现

传统的router路由在折叠屏适配上，无法提供良好支撑。所以建议切换到Navigation。

因为不管是路由回退栈的处理，还是页面数的限制问题。Navigation都优于router，并且华为官方已经明确表示，推荐Navgation的方案。

当然如果有了解HMRouter的同学，也可以使用，因为HMRouter就是在Navgation上进行封装和优化的三方库。

分栏
设置主页面容器Navigation，mode属性为NavigationMode.Stack：

@Entry
@Component
struct MainPage {@State message: string = 'Hello World';// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// 跳转到子页面this.pageStack.pushDestination({name: "OnePage",}, false); //该false表示不需要转场动画，默认是有的})}.width('100%')}.height('100%')}.mode(NavigationMode.Split)}
}

细节可参考该文章，点击跳转=》（【HarmonyOS】关于官方推荐的组件级路由Navigation的心得体会）

---

单栏（全屏）
设置主页面容器Navigation，mode属性为NavigationMode.Stack：

@Entry
@Component
struct MainPage {@State message: string = 'Hello World';// 创建一个页面栈对象并传入NavigationpageStack: NavPathStack = new NavPathStack()// 使用 @State 装饰器定义响应式变量，用于存储组件的宽高@State width: number = 0@State height: number = 0build() {Navigation(this.pageStack) {// 页面布局Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{// 跳转到子页面this.pageStack.pushDestination({name: "OnePage",}, false); //该false表示不需要转场动画，默认是有的})}.width('100%')}.height('100%')}// 分为三种模式，（默认）自动NavigationMode.Auto，单页面NavigationMode.Stack和分栏NavigationMode.Split.mode(NavigationMode.Stack).backgroundColor(Color.Gray).onSizeChange((width: number, height: number) => {// 当组件大小变化时，更新宽高信息this.width = widththis.height = height}).onAreaChange( (oldValue: Area, newValue: Area)=>{// newValue.width})}
}

界面需要监听最外层宽高，onSizeChange和onAreaChange都可以，建议使用onAreaChange，用于判定界面是否需要切换为平板适配模式。【目前官方推荐使用600vp 作为当页面宽度大于等于一定阈值点】

子页面添加跳转入口函数，添加NavDestination生命周期的处理：

// 跳转页面入口函数
@Builder
export function OnePageBuilder() {OnePage()
}@Entry
@Component
struct OnePage {private TAG: string = "OnePage";@State message: string = 'Hello World';pathStack: NavPathStack = new NavPathStack();build() {NavDestination() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}.onShown(()=>{console.log(this.TAG, "OnePage onShown");}).onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;})}
}

在首页获取到的宽高，可以使用多种方式缓存起来，例如放到AppStorage，单例中。二级等子页面进入后就可以判定。

当然页面中的动态监听也需要保存。场景需要覆盖，因为在首页时用户可能是折叠状态，进入子页面后展开的情况也有。

当然判定手机折叠屏状态，除了通过宽高，也可通过官方提供的折叠屏状态进行判断，不过在上下折叠屏手机上也会被激活，这里需要额外在判定一下。

import { display } from '@kit.ArkUI';let ret: boolean = false;
// 当前是否是折叠屏
ret = display.isFoldable();if(ret){
let callback: Callback<display.FoldStatus> = (data: display.FoldStatus) => {console.info('Listening enabled. Data: ' + JSON.stringify(data));
};
display.on('foldStatusChange', callback);
}// 页面销毁时，记得取消监听
display.off('foldStatusChange', callback);