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

一、 多设备卡片适配原则

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

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

使用百分比方式配合标注

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

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

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

三、 多端适配尺寸

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

本文根据HarmonyOS官方文档整理

附件链接:

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

相关推荐
lxysbly3 小时前
鸿蒙NDS模拟器app下载
华为·harmonyos
里欧跑得慢3 小时前
Flutter 组件 tavily_dart 的适配 鸿蒙Harmony 实战 - 驾驭 AI 搜索引擎集成、实现鸿蒙端互联网知识精密获取与语义增强方案
flutter·harmonyos·鸿蒙·openharmony·tavily_dart
国医中兴5 小时前
Flutter 三方库 pickled_cucumber 的鸿蒙化适配指南 - 玩转 BDD 行为驱动开发、Gherkin 自动化测试实战、鸿蒙级质量守护神
驱动开发·flutter·harmonyos
里欧跑得慢5 小时前
Flutter 三方库 config 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、多源叠加的命令行参数解析与环境配置文件加载引擎
flutter·harmonyos·鸿蒙·openharmony
爱学习的小齐哥哥5 小时前
HarmonyOS 5.0元服务深度解析:下一代应用形态的开发与实践指南
华为·harmonyos·harmony pc·harmonyos app
左手厨刀右手茼蒿5 小时前
Flutter 三方库 flutter_azure_tts 深度链接鸿蒙全场景智慧语音中枢适配实录:强势加载云端高拟真情感发音合成系统实现零延迟超自然多端协同-适配鸿蒙 HarmonyOS ohos
flutter·harmonyos·azure
雷帝木木5 小时前
Flutter 三方库 image_compare_2 的鸿蒙化适配指南 - 实现像素级的图像分块对比、支持感知哈希(pHash)与端侧视觉差异检测实战
flutter·harmonyos·鸿蒙·openharmony·image_compare_2
王码码20355 小时前
Flutter 三方库 sum_types 的鸿蒙化适配指南 - 引入函数式编程思维,让鸿蒙应用的状态处理更严谨
flutter·harmonyos·鸿蒙·openharmony·sum_types
加农炮手Jinx5 小时前
Flutter 三方库 cli_script 鸿蒙化极简命令行执行引擎适配探索:在多维沙盒终端环境注入异构 Shell 串联逻辑彻底拔高全自动化容器脚本运维及-适配鸿蒙 HarmonyOS ohos
运维·flutter·harmonyos
亘元有量-流量变现5 小时前
APP自动识别跳转各大应用商店(鸿蒙+iOS+安卓全品牌)|可直接部署落地页源码
android·ios·harmonyos