鸿蒙原生应用开发-折叠屏、平板设备服务卡片适配

一、 多设备卡片适配原则

为不同尺寸的卡片提供不同的功能

在卡片开发过程中请考虑适配不同尺寸的设备,特别是在折叠屏和平板设备上,设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应能力的卡片,避免在卡片内容不做任何处理的情况下直接适配成较大尺寸,原则上卡片尺寸越大呈现的信息要越丰富,可交互的范围也越大。

使用百分比方式配合标注

由于设备尺寸的不确定性会导致卡片的尺寸发生变化,设计师在交付卡片布局的过程中,可以使用百分比进行标注。例如标准尺寸的卡片宽度为 150vp,按钮距离卡片边缘间距为 24vp 时,当卡片宽度扩展时仍然使用相同的间距可能效果并不美观,我们可以换算出卡片的间距在标准尺寸下占整体比例的 16%,这样当卡片尺寸扩展到 200vp 时,卡片边距也就变成了 32vp,以此类推,能够保证一定程度下的适配效果。

二、 卡片对应宫格比例对照表

服务卡片参照桌面宫格布局为基准参照物,通过换算对应宫格来实现在不同设备的桌面适配。为了减少卡片尺寸的变化规律,当手机从 4*6 布局切换至 5*6 布局时,需保证中卡片和大卡片的最大宽度不变化。在平板的桌面 2*N 和 4*N 对应的桌面宫格对应更换为 2*3 和 3*3。

三、 多端适配尺寸

服务卡片需要适配除手机以外的折叠屏及平板等设备,可以在此处下载对应 Library(见附件链接) 文件,文件内包含对应的桌面宫格和详细尺寸描述。

本文根据HarmonyOS官方文档整理

附件链接:

HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com

相关推荐
小冷爱学习!10 小时前
华为动态路由-OSPF-完全末梢区域
服务器·网络·华为
2501_9044477411 小时前
华为发力中端,上半年nova14下半年nova15,大力普及原生鸿蒙
华为·智能手机·django·scikit-learn·pygame
MarkHD11 小时前
第十八天 WebView深度优化指南
华为·harmonyos
塞尔维亚大汉12 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【MIPI CSI】
harmonyos·领域驱动设计
别说我什么都不会12 小时前
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
操作系统·harmonyos
feiniao865113 小时前
2025年华为手机解锁BL的方法
华为·智能手机
菜鸟单飞14 小时前
介绍一款非常实用的PDF阅读软件!
windows·pdf·电脑
塞尔维亚大汉14 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【I3C】
harmonyos·领域驱动设计
VVVVWeiYee14 小时前
BGP配置华为——路径优选验证
运维·网络·华为·信息与通信
今阳16 小时前
鸿蒙开发笔记-6-装饰器之@Require装饰器,@Reusable装饰器
android·app·harmonyos