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

一、 多设备卡片适配原则

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

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

使用百分比方式配合标注

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

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

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

三、 多端适配尺寸

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

本文根据HarmonyOS官方文档整理

附件链接:

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

相关推荐
AI_零食2 小时前
鸿蒙PC Electron跨平台应用开发:24时区时间表应用详解
前端·华为·electron·开源·harmonyos·鸿蒙
ACP广源盛139246256732 小时前
GSV2221 显示转换芯片@ACP#赋能 RTX Spark 端侧 AI 设备,构建多屏全模态视觉交互新生态
大数据·人工智能·嵌入式硬件·gpt·spark·电脑·音视频
今日综合5 小时前
2026免费AI自动抠图工具汇总:全平台+电脑在线全方案,无水印零套路
人工智能·电脑
提子拌饭1336 小时前
爆发效果技术——基于鸿蒙PC Electron框架实现
华为·架构·electron·开源·harmonyos·鸿蒙·鸿蒙系统
坚果派·白晓明6 小时前
鸿蒙PC三方库使用:使用 AtomCode + Skills 自动完成鸿蒙化三方库spdlog集成
c++·华为·ai编程·harmonyos·skills·atomcode·c/c++三方库
再见6587 小时前
【鸿蒙实战】从零开发「随机决策器」——选择困难症终结者
华为·harmonyos
国霄7 小时前
从编译产物看懂 ArkUI V2 `@BuilderParam` 的反应式陷阱
harmonyos
再见65811 小时前
鸿蒙Next实战开发(四):个人中心与系统设置页面开发
华为·harmonyos
坚果派·白晓明12 小时前
[鸿蒙PC三方库移植适配] 使用 AtomCode + Skills 自动完成spdlog鸿蒙化适配
c++·华为·ai编程·harmonyos·skills·atomcode
不爱学英文的码字机器12 小时前
[鸿蒙PC命令行移植适配]移植rust三方库sd到鸿蒙PC的完整实践
华为·rust·harmonyos