HarmonyOS元服务开发系列教程（四）：创建音乐卡片原创

幽蓝计划

发布于 2025-8-14 11:14

浏览

0收藏

首先诚邀大家参加学习鸿蒙拿好礼活动，即日起，只要加入班级考取华为开发者基础/高级证书，并发表一篇技术文章，就有机会获得官方发放的精美礼品，数量有限，先到先得。幽蓝君的班级链接如下：

https://developer.huawei.com/consumer/cn/training/classDetail/7b706ca975bd42e98b3bb51aa6b0be5a?type=1?ha_source=hmosclass&ha_sourceId=89000248

前几篇文章中我们基本完成了一个音乐元服务的基本功能，今天分享一下卡片的相关内容。

卡片是一种页面展示形式，可以将应用中的重要信息和常用操作抽取到卡片上，从而完成快捷的操作。

普通应用和元服务都可以创建卡片，不过卡片一般在元服务中使用较多。

创建卡片的方法是在entry文件夹右键，选择Service Widget,这时候可以看到两个选项，分别是Static Widget和Dynamic Widget，代表静态卡片和动态卡片。二者的区别是动态卡片支持通用事件能力和自定义动效能力，适用于有复杂业务逻辑和交互的场景，功能丰富但内存开销较大。静态卡片支持UI组件和布局能力，不支持通用事件和自定义动效能力，卡片内容以静态图显示，仅可以通过FormLink组件跳转到指定的UIAbility，适用于展示类卡片（UI相对固定），功能简单但可以有效控制内存开销。

HarmonyOS元服务开发系列教程（四）：创建音乐卡片-鸿蒙开发者社区

我们这里选择创建动态卡片，下一步可以配置卡片的名字、描述、以及尺寸信息，配置完成后卡片就创建好了。

HarmonyOS元服务开发系列教程（四）：创建音乐卡片-鸿蒙开发者社区

创建卡片之后可以看到项目增加两个文件夹，分别是entryformability和widget，entryformability中存放的是卡片的生命周期文件。如onAddForm是创建卡片时的回调，onRemoveForm是卡片被删除时的回调。

Widget文件夹下有page文件夹，因此这里是负责卡片UI的部分。

创建卡片时自动初始化了简单的hello world代码，退出应用双手捏合屏幕，点击卡片选择应用，可以把卡片添加到桌面上。点击卡片可以跳转到应用。

现在可以尝试修改卡片的UI，添加播放的音乐信息和常用控制按钮，具体代码如下：

build() {
  Column({space:10}) {
    Image($r('app.media.BumpingUpandDown'))
      .width(50)
      .height(50)
      .backgroundColor(Color.Black)
      .borderRadius(6)
    Text('音乐')
      .fontSize(15)
      .fontWeight(FontWeight.Medium)
      .fontColor(Color.Black)
    Row({space:10}){
      Image($r('app.media.control_last'))
        .width(20)
        .height(20)
      Image($r('app.media.control_play'))
        .width(30)
        .height(30)
      Image($r('app.media.control_next'))
        .width(20)
        .height(20)
    }
  }
  .height(this.fullHeightPercent)
  .width(this.fullWidthPercent)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .onClick(() => {
    postCardAction(this, {
      action: this.actionType,
      abilityName: this.abilityName,
      params: {
        message: this.message
      }
    });
  })
}

运行效果如下：

HarmonyOS元服务开发系列教程（四）：创建音乐卡片-鸿蒙开发者社区