鸿蒙5.0开发【适配折叠屏展开与收起,实现单屏与双屏UI的无缝切换】

随着移动设备技术不断革新,折叠屏手机以其独特的设计和灵活的显示能力,为用户带来了前所未有的视觉体验。然而,这种新型屏幕形式也对界面设计提出了全新挑战。如何在用户��开或收起折叠屏时,即时响应并做出相应的UI调整,是确保用户体验连贯性的关键。

在这样的背景下,实现界面布局在单屏与双屏模式之间的无缝切换。不仅能让应用在单屏模式下保持简洁优雅,也能在双屏模式下提供更广阔的视野和更丰富的交互体验。

适配前后对比

  • 适配前不做任何处理,UI布局会根据折叠屏的展开、收起自适应屏幕,示例如下:

1

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

2

实际开发中,我们可以在同一个页面,共用一套数据,实现从单屏到双屏的平滑过渡,让用户在使用过程中感受到无缝的体验。

实时监听折叠屏状态

HarmonyOS NEXT 提供 *媒体查询 (@ohos.mediaquery) *可用于实现监听折叠屏展开、收起变化。

该方法库适用于 鸿蒙APP开发、元服务开发,关键代码如下:

listener = mediaquery.matchMediaSync('(min-width: 400vp)')
onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
    if (mediaQueryResult.matches) {
      // 展开态
    } else {
      // 折叠态
    }
}    

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

import mediaquery from '@ohos.mediaquery'

/// 折叠屏幕变化监听
abstract class FoldStatusObserver {
  public static readonly foldStatusKey = 'foldStatusKey'
  private st
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值