[HarmonyOS]鸿蒙(添加服务卡片)推荐商品 修改卡片UI(内容)

什么是服务卡片 ?

鸿蒙系统中的服务卡片(Service Card)就是一种轻量级的应用展示形式,它可以让用户在不打开完整应用的情况下,快速访问应用内的特定功能或信息。以下是服务卡片的几个关键点:

  1. 轻量级:服务卡片不需要启动整个应用,只需要加载必要的数据和界面,因此加载速度快,占用资源少。
  2. 即时访问:用户可以直接在桌面或其他设备上看到和使用服务卡片,无需进入应用内部。
  3. 多样化:服务卡片可以显示静态信息(如天气预报),也可以显示动态信息(如股票行情),还可以提供简单的交互操作(如控制智能家居设备)。
  4. 跨设备支持:服务卡片可以在不同的设备上运行,如手机、平板、智慧屏等,实现多设备协同。
  5. 个性化:可以根据用户的偏好和使用习惯进行个性化展示,提供定制化的信息和服务。
举例说明
  • 天气卡片:用户可以在桌面上添加一个天气卡片,直接查看当前的天气情况,而不需要打开完整的天气应用。
  • 新闻摘要卡片:用户可以在桌面上添加一个新闻摘要卡片,快速浏览最新的新闻标题,点击后可以跳转到详细的新闻页面。
  • 健康监测卡片:用户可以在桌面上添加一个健康监测卡片,查看步数、心率等健康数据,而不需要打开健康应用。
如何使用
  1. 添加卡片:用户可以在设备的桌面上长按空白区域,选择"添加服务卡片",然后从列表中选择需要的应用和卡片类型。
  2. 使用卡片:添加后,用户可以直接在桌面上查看和使用服务卡片提供的功能或信息。
  3. 管理卡片:用户可以长按卡片,选择删除或调整卡片的位置。
优点
  • 方便快捷:用户可以快速获取所需信息,提高使用效率。
  • 节省资源:服务卡片占用的系统资源较少,不会影响设备的性能。
  • 增强互动:提供简单的交互操作,增强用户的使用体验。

服务卡片提供了一种界面展示形式,可以将应用的重要信息或操作前置到服务卡片以达到服务直达、减少跳转层级的体验效果。有些类似于创建了一种 "快键方式",比如下面的卡片流程图:

新建服务卡片步骤:

项目右键新建-(Service Widget)-(Dynamic Widget)动态服务卡片

完成之后:

修改卡片UI

约束限制

针对ArkTS卡片,主要存在如下使用限制:

  • 当导入模块时,仅支持导入标识"支持在ArkTS卡片中使用"的模块。
  • 仅支持声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。
  • 卡片的事件处理和使用方的事件处理是独立的,建议在使用方支持左右滑动的场景下卡片内容不要使用左右滑动功能的组件,以防手势冲突影响交互体验。
  • 暂不支持导入共享包及使用native语言开发。
  • 暂不支持极速预览、断点调试能力、热重载及设置超时任务(setTimeOut)等能力。

卡片的UI可以像一般组件进行基础布局,很方便就可以做定制修改,打开WidgetCard.ets文件进行修改即可

之所以服务卡能跳转是因为postCardAction 服务卡片专属的API

注意:

服务卡片不支持动态的URL(只支持本地图片)

相关推荐
赵财猫._.2 分钟前
React Native鸿蒙开发实战(二):基础组件与Flex布局
react native·react.js·harmonyos
盐焗西兰花2 小时前
鸿蒙学习实战之路-多端交互最佳实践
学习·交互·harmonyos
90后的晨仔3 小时前
鸿蒙开发必备:macOS 上 ohpm 的完整安装与配置指南(从报错到成功)
harmonyos
90后的晨仔4 小时前
安装ohpm报错ERROROR: node: command not found Failed to find the executable 'node'
harmonyos
盐焗西兰花4 小时前
鸿蒙学习实战之路-Web 页面适配最佳实践
前端·学习·harmonyos
90后的晨仔5 小时前
ANDROID_HOME not set. Set the environment variable. Then, close DevEco Studio an
harmonyos
kirk_wang5 小时前
在鸿蒙端适配 Flutter `flutter_native_splash` 库:原理、实现与性能优化
flutter·移动开发·跨平台·arkts·鸿蒙
俩毛豆6 小时前
【鸿蒙生态共建】一文讲清耗时操作对定时器的超时事件影响及解决方案-《精通HarmonyOS NEXT :鸿蒙App开发入门与项目化实战》读者福利
华为·harmonyos
赵财猫._.6 小时前
【Flutter x 鸿蒙】第七篇:性能优化与调试技巧
flutter·性能优化·harmonyos
Oflycomm6 小时前
华为南京研究所通感一体智慧园区项目入选 WAA 优秀案例,行业数智化转型再迎新标杆
华为·wifi7·wifi7模块