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

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

一、媒介

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

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

分栏
在左右折叠手机上，相当于首页一级页面在左边，二级子页面点开后在右边。三折叠上形态未知，有知道的小伙伴可以同步下。
上下折叠手机上，不以分栏的方式呈现，和直板机相似。
单栏（全屏）
全屏适配而且拉伸界面，不进行界面处理。而是处理成平板的UI布局形式，和直板机界面排版不一样。这种适配方案结果最好，但是工作量较大。
不过目前华为官方反馈说以后不演进分栏方案了。三折叠和25年三月新形态手机的适配都是风险。
三、适配方案实现

传统的router路由在折叠屏适配上，无法提供良好支持。所以建议切换到Navigation。
因为不管是路由回退栈的处理，还是页面数的限定问题。Navigation都优于router，而且华为官方已经明确表现，推荐Navgation的方案。
当然如果有了解HMRouter的同学，也可以利用，因为HMRouter就是在Navgation上进行封装和优化的三方库。
分栏
设置主页面目面目器Navigation，mode属性为NavigationMode.Stack：

1. @Entry
2. @Component
3. struct MainPage {
4.   @State message: string = 'Hello World';
5.   // 创建一个页面栈对象并传入Navigation
6.   pageStack: NavPathStack = new NavPathStack()
8.   build() {
9.     Navigation(this.pageStack) {
10.       // 页面布局
11.       Row() {
12.         Column() {
13.           Text(this.message)
14.             .fontSize(50)
15.             .fontWeight(FontWeight.Bold)
16.             .onClick(()=>{
17.               // 跳转到子页面
18.               this.pageStack.pushDestination({
19.                 name: "OnePage",
20.               }, false); //该false表示不需要转场动画，默认是有的
21.             })
22.         }
23.         .width('100%')
24.       }
25.       .height('100%')
26.     }
27.     .mode(NavigationMode.Split)
29.   }
30. }

复制代码

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

---

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

1. @Entry
2. @Component
3. struct MainPage {
4.   @State message: string = 'Hello World';
5.   // 创建一个页面栈对象并传入Navigation
6.   pageStack: NavPathStack = new NavPathStack()
7.     // 使用 @State 装饰器定义响应式变量，用于存储组件的宽高
8.   @State width: number = 0
9.   @State height: number = 0
11.   build() {
12.     Navigation(this.pageStack) {
13.       // 页面布局
14.       Row() {
15.         Column() {
16.           Text(this.message)
17.             .fontSize(50)
18.             .fontWeight(FontWeight.Bold)
19.             .onClick(()=>{
20.               // 跳转到子页面
21.               this.pageStack.pushDestination({
22.                 name: "OnePage",
23.               }, false); //该false表示不需要转场动画，默认是有的
24.             })
25.         }
26.         .width('100%')
27.       }
28.       .height('100%')
29.     }
30.     // 分为三种模式，（默认）自动NavigationMode.Auto，单页面NavigationMode.Stack和分栏NavigationMode.Split
31.     .mode(NavigationMode.Stack)
32.     .backgroundColor(Color.Gray)
33.      .onSizeChange((width: number, height: number) => {
34.           // 当组件大小变化时，更新宽高信息
35.           this.width = width
36.           this.height = height
37.         })
38.         .onAreaChange( (oldValue: Area, newValue: Area)=>{
39.           // newValue.width
40.       })
41.   }
42. }

复制代码

界面必要监听最外层宽高，onSizeChange和onAreaChange都可以，建议利用onAreaChange，用于判断界面是否必要切换为平板适配模式。【目前官方推荐利用600vp 作为当页面宽度大于等于肯定阈值点】
子页面添加跳转入口函数，添加NavDestination生命周期的处理：

1. // 跳转页面入口函数
2. @Builder
3. export function OnePageBuilder() {
4.   OnePage()
5. }
7. @Entry
8. @Component
9. struct OnePage {
10.   private TAG: string = "OnePage";
11.   @State message: string = 'Hello World';
12.   pathStack: NavPathStack = new NavPathStack();
14.   build() {
15.     NavDestination() {
16.       Row() {
17.         Column() {
18.           Text(this.message)
19.             .fontSize(50)
20.             .fontWeight(FontWeight.Bold)
21.         }
22.         .width('100%')
23.       }
24.       .height('100%')
25.     }.onShown(()=>{
26.       console.log(this.TAG, "OnePage onShown");
27.     })
28.      .onReady((context: NavDestinationContext) => {
29.          this.pathStack = context.pathStack;
30.     })
31.   }
32. }

复制代码

在首页获取到的宽高，可以利用多种方式缓存起来，例如放到AppStorage，单例中。二级等子页面进入后就可以判断。
当然页面中的动态监听也必要生存。场景必要覆盖，因为在首页时用户可能是折叠状态，进入子页面后展开的情况也有。
当然判断手机折叠屏状态，除了通过宽高，也可通过官方提供的折叠屏状态进行判断，不过在上下折叠屏手机上也会被激活，这里必要额外在判断一下。

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。