HarmonyOS ：适配折叠屏睁开与收起，实现单屏与双屏UI的无缝切换

弁言

    随着移动装备技能不停革新，折叠屏手机以其独特的操持和机动的表现本领，为用户带来了亘古未有的视觉体验。然而，这种新型屏幕情势也对界面操持提出了全新寻衅。怎样在用户睁开或收起折叠屏时，即时相应并做出相应的UI调解，是确保用户体验连贯性的关键。
    在如许的配景下，实现界面布局在单屏与双屏模式之间的无缝切换。不但能让应用在单屏模式下保持轻巧优雅，也能在双屏模式下提供更广阔的视野和更丰富的交互体验。
    适配前后对比

   

     

• 适配前不做任那里理，UI布局会根据折叠屏的睁开、收起自顺应屏幕，示比方下：   
  

   

   

     

• 适配后，单屏、双屏各自一套 UI 操持 可根据折叠屏的睁开、收起两种状态，实现差别性UI交互操持，示比方下：   
  

   

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

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

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

复制代码

     

      

• 1.      
  
• 2.      
  
• 3.      
  
• 4.      
  
• 5.      
  
• 6.      
  
• 7.      
  
• 8.      
  

             为了方便，我们可把该本领封装成工具类：
                      登录后复制                  

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

复制代码

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