鸿蒙5.0开辟【适配折叠屏睁开与收起，实现单屏与双屏UI的无缝切换】 ...

随着移动设备技术不断革新，折叠屏手机以其独特的设计和灵活的显示能力，为用户带来了亘古未有的视觉体验。然而，这种新型屏幕形式也对界面设计提出了全新挑战。如何在用户��开或收起折叠屏时，即时响应并做出相应的UI调整，是确保用户体验连贯性的关键。
在这样的背景下，实现界面布局在单屏与双屏模式之间的无缝切换。不但能让应用在单屏模式下保持简洁优雅，也能在双屏模式下提供更广阔的视野和更丰富的交互体验。
适配前后对比

• 适配前不做任何处置惩罚，UI布局会根据折叠屏的睁开、收起自适应屏幕，示例如下：
  

• 适配后，单屏、双屏各自一套 UI 设计 可根据折叠屏的睁开、收起两种状态，实现差异性UI交互设计，示例如下：
  

   实际开辟中，我们可以在同一个页面，共用一套数据，实现从单屏到双屏的平滑过渡，让用户在利用过程中感受到无缝的体验。
  及时监听折叠屏状态

HarmonyOS NEXT 提供 *媒体查询 (@ohos.mediaquery) *可用于实现监听折叠屏睁开、收起变化。
该方法库实用于 鸿蒙APP开辟、元服务开辟，关键代码如下：

1. listener = mediaquery.matchMediaSync('(min-width: 400vp)')
2. onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
3.     if (mediaQueryResult.matches) {
4.       // 展开态
5.     } else {
6.       // 折叠态
7.     }
8. }   

复制代码

为了方便，我们可把该能力封装成工具类：

1. import mediaquery from '@ohos.mediaquery'
3. /// 折叠屏幕变化监听
4. abstract class FoldStatusObserver {
5.   public static readonly foldStatusKey = 'foldStatusKey'
6.   private static listener?: mediaquery.MediaQueryListener
8.   /// 在 MainPage aboutToAppear 生命周期内调用
9.   public static startListening() {
10.     FoldStatusObserver.listener = mediaquery.matchMediaSync('screen and (min-width: 400vp)')
11.     FoldStatusObserver.listener.on('change', FoldStatusObserver.onFoldStatusChange)
12.   }
14.   /// 在 MainPage aboutToDisappear 生命周期内调用
15.   public static stopListening() {
16.     FoldStatusObserver.listener?.off('change', FoldStatusObserver.onFoldStatusChange)
17.   }
19.   /// 在任意 Component 内通过使用 `@StorageProp('foldStatusKey') isFold: boolean = false` 进行监听变化
20.   private static onFoldStatusChange(result: mediaquery.MediaQueryResult): void {
21.     const status = AppStorage.get<boolean>(FoldStatusObserver.foldStatusKey)
22.     if (result.matches !== status) {
23.       AppStorage.set(FoldStatusObserver.foldStatusKey, result.matches)
24.     }
25.   }
26. }
28. export { FoldStatusObserver }

复制代码

利用方式：

• 第一步，在 EntryAbility onCreate 生命周期内设置默认值：
  

1. onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
2.   hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
3.   AppStorage.setOrCreate('foldStatusKey', false)
4. }

复制代码

• 第二步，在 MainPage aboutToAppear、aboutToDisappear 生命周期内开启、关闭折叠状态监听：
  

1. struct MainPage {
2.   aboutToAppear(): void {
3.     FoldStatusObserver.startListening()
4.   }
6.   aboutToDisappear(): void {
7.     FoldStatusObserver.stopListening()
8.   }
9. }

复制代码

• 第三步，在恣意 Component 内通过利用 @StorageProp(‘foldStatusKey’) isFold 进行监听折叠屏状态变化
  

1. @Component
2. export struct MyComponent {
3.   @StorageProp('foldStatusKey') isFold: boolean = false
5.   build() {
6.     Stack() {
7.       if (this.isFold) {
8.         // 这是折叠屏展开时UI
9.       } else {
10.         // 这是折叠屏收起时UI
11.       }
12.     }
13.     .width('100%')
14.     .height('100%')
15.   }
16. }

复制代码

容器封装与UI自适应

封装一个响应折叠状态变化的父容器，我们可以在需要折叠屏差异化设计的页面，通过利用父容器的方式让代码变得更简洁。

• 抛砖引玉，容器封装：
  

1. /// 响应折叠屏变化的父容器
2. @Component
3. export struct FoldStatusContainer {
4.   @StorageProp('foldStatusKey') isFold: boolean = false
5.   // 非折叠状态 UI 布局
6.   @BuilderParam unFoldBodyContainer: () => void = this.defaultContainer
7.   // 折叠状态 UI 布局
8.   @BuilderParam foldBodyContainer: () => void = this.defaultContainer
10.   @Builder
11.   defaultContainer() {
12.     Column()
13.   }
15.   build() {
16.     Stack() {
17.       if (this.isFold) {
18.         this.foldBodyContainer()
19.       } else {
20.         this.unFoldBodyContainer()
21.       }
22.     }
23.     .width('100%')
24.     .height('100%')
25.   }
26. }

复制代码

• 在需要折叠屏差异化UI设计的页面里，我们这样利用 FoldStatusContainer ：
  

1. // 适配折叠屏示例页面
2. @Component
3. export struct FixFoldUiExample {
5.   @Builder
6.   unFoldUiContainer() {
7.     Stack() {
8.       Text('我是全屏内容').fontSize(20)
9.     }
10.     .width('100%')
11.     .height('100%')
12.     .backgroundColor(Color.Orange)
13.   }
15.   @Builder
16.   foldUiContainer() {
17.     Row() {
18.       Stack() {
19.         Text('我是左边的分屏内容').fontSize(20)
20.       }
21.       .backgroundColor(Color.Grey)
22.       .height('100%')
23.       .layoutWeight(1)
25.       Stack() {
26.         Text('我是右边的分屏内容').fontSize(20)
27.       }
28.       .backgroundColor(Color.Pink)
29.       .height('100%')
30.       .layoutWeight(1)
31.     }
32.     .width('100%')
33.     .height('100%')
34.   }
36.   @Builder
37.   bodyContainer() {
38.     FoldStatusContainer({
39.       unFoldBodyContainer: this.unFoldUiContainer,
40.       foldBodyContainer: this.foldUiContainer,
41.     })
42.   }
44.   build() {
45.     NavDestination() {
46.       Column() {
47.         this.bodyContainer()
48.       }
49.       .height('100%')
50.       .width('100%')
51.       .justifyContent(FlexAlign.Center)
52.     }.title('适配折叠屏')
53.   }
54. }

复制代码

该页面的效果如下：

总结

• 通过适配折叠屏，用户可以在差别形态下获得最佳的交互体验，无论是单屏照旧睁开后的双屏模式。
  
• 折叠屏为UI设计提供了新的交互方式，如拖拽、分屏等，适配后的应用可以利用这些特性创造新的用户交互体验。
  

​
末了呢，许多开辟朋友不知道需要学习那些鸿蒙技术？鸿蒙开辟岗位需要把握那些焦点技术点？为此鸿蒙的开辟学习必须要体系性的进行。
而网上有关鸿蒙的开辟资料非常的少，如果你想学好鸿蒙的应用开辟与体系底层开辟。你可以参考这份资料，少走许多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开辟文档》里面内容包罗了（ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点
如果你是一名Android、Java、前端等等开辟人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开辟的学习蹊径图。
​​​​

高清完备版请点击→《鸿蒙NEXT星河版开辟学习文档》
针对鸿蒙成长蹊径打造的鸿蒙学习文档。话不多说，我们直接看具体资料鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，资助大家在技术的蹊径上更进一步。
《鸿蒙 (OpenHarmony)开辟学习视频》
《鸿蒙生态应用开辟V2.0白皮书》
《鸿蒙 (OpenHarmony)开辟根本到实战手册》
《鸿蒙开辟根本》
《鸿蒙开辟进阶》
《鸿蒙开辟实战》

获取这份鸿蒙星河版学习资料，请点击→《鸿蒙NEXT星河版开辟学习文档》
总结

鸿蒙—作为国家主力推送的国产操作体系。部门的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机会和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开辟，未来将会支持 50 万款的应用。那么这么多的应用需要开辟，也就意味着需要有更多的鸿蒙人才。鸿蒙开辟工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

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