输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
API version全部版本
设备全部
元服务API集不筛选
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
API参考应用框架ArkData（方舟数据管理）ArkTS 组件@ohos.data.UdmfComponents (内容卡片)

@ohos.data.UdmfComponents (内容卡片)

Phone20+PC/2in120+Tablet20+TV20+
更新时间: 2026-09-01 03:59
本文导读
展开章节

针对ContentForm标准数据结构的内容卡片，支持设置标题（必选）、描述、应用图标、应用名称、跳转链接、内容图片。用户点击卡片时，执行传入的回调事件函数，若设置的跳转链接不为空，则跳转到指定的页面。

使用场景：

  • 社交应用分享内容展示
  • 即时通讯消息卡片
  • 内容推荐卡片
说明

该组件从API version 20开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

本模块接口仅可在Stage模型下使用。

导入模块

收起
自动换行
深色代码主题
复制
  1. import { ContentFormCard, FormType } from '@kit.ArkData';

子组件

无

ContentFormCard

Phone20+PC/2in120+Tablet20+TV20+

ContentFormCard({contentFormData: uniformDataStruct.ContentForm, formType: FormType, formWidth?: number, formHeight?: number, handleOnClick?: Function})

内容卡片控件，用于在应用内展示标题、描述、内容图片、应用信息等。适用于内容分发、社交动态、消息通知等场景。

装饰器类型：@Component

系统能力： SystemCapability.DistributedDataManager.UDMF.Core

展开
名称 类型 必填 装饰器类型 说明
contentFormData uniformDataStruct.ContentForm 是 - 内容卡片数据，用于设置卡片展示的标题、描述、应用图标、应用名称、跳转链接或内容图片等信息。
formType FormType 是 @Prop 内容卡片类型，影响内容卡片的大小。
formWidth number 否 @Prop 卡片宽度，其范围在设置的内容卡片类型默认宽度的0.8 ~ 1.2倍之间，当formType为TYPE_SMALL时，其范围在设置的内容卡片类型默认宽度的0.4 ~ 1.2倍之间。单位为vp。省略时使用内容卡片类型的默认宽度。
formHeight number 否 @Prop 卡片高度，当contentFormData中的title为空字符串时，卡片高度为传入的值，否则其范围在设置的内容卡片类型默认高度的0.8 ~ 1.2倍之间，当formType为TYPE_SMALL时，其范围在设置的内容卡片类型默认高度的0.4 ~ 1.2倍之间。单位为vp。省略时使用内容卡片类型的默认高度。
handleOnClick Function 否 - 点击事件回调函数。用户点击卡片时，会执行传入的回调函数，实现自定义点击行为。

FormType

Phone20+PC/2in120+Tablet20+TV20+

内容卡片类型枚举，提供了大、中、小三种尺寸。

系统能力： SystemCapability.DistributedDataManager.UDMF.Core

展开
名称 值 说明
TYPE_BIG 0 表示 4 x 4 的尺寸。默认卡片宽度为200vp，默认高度为200vp。
TYPE_MID 1 表示 4 x 2 的尺寸。默认卡片宽度为200vp，默认高度为100vp。
TYPE_SMALL 2 表示 2 x 1 的尺寸。默认卡片宽度为137vp，默认高度为83vp。

示例

收起
自动换行
深色代码主题
复制
  1. // 导入所需模块
  2. import { uniformDataStruct } from '@kit.ArkData'
  3. 

  4. @Entry
  5. @Component
  6. struct Index {
  7.   // 定义内容卡片数据
  8.   @State contentForm: uniformDataStruct.ContentForm = {
  9.     uniformDataType: 'general.content-form',
  10.     title: ''
  11.   };
  12.   // 控制卡片显示状态
  13.   @State startToShow: boolean = false;
  14. 

  15.   // 组件即将显示时初始化数据
  16.   aboutToAppear(): void {
  17.     this.initData();
  18.   }
  19. 

  20.   // 初始化内容卡片数据
  21.   async initData() {
  22.     // 获取应用上下文
  23.     let context = this.getUIContext().getHostContext();
  24.     if (!context) {
  25.       return;
  26.     }
  27.     try {
  28.       // 加载应用图标和缩略图资源
  29.       let appIcon = await context.resourceManager.getMediaContent($r('app.media.startIcon').id);
  30.       let thumbImage = await context.resourceManager.getMediaContent($r('app.media.foreground').id);
  31.       // 构建内容卡片数据对象
  32.       this.contentForm = {
  33.         uniformDataType: 'general.content-form',
  34.         title: 'Content form title',
  35.         thumbData: appIcon,
  36.         description: 'Content form description',
  37.         appIcon: thumbImage,
  38.         appName: 'com.test.demo'
  39.       };
  40.     } catch (err) {
  41.       console.error(`Init data error`);
  42.     }
  43.   }
  44. 

  45.   // 构建UI界面
  46.   build() {
  47.     Column() {
  48.       // 显示按钮，点击后展示内容卡片
  49.       Button('show card')
  50.         .onClick(() => {
  51.           this.startToShow = true;
  52.         })
  53.       // 条件渲染内容卡片组件
  54.       if (this.startToShow) {
  55.         ContentFormCard({
  56.           contentFormData: this.contentForm,
  57.           formType: FormType.TYPE_SMALL,
  58.           formWidth: 110,
  59.           formHeight: 50,
  60.           // 点击卡片的回调函数
  61.           handleOnClick: () => {
  62.             console.info(`Clicked card`);
  63.           }
  64.         })
  65.       }
  66.     }
  67.   }
  68. }

效果呈现

本例效果如下：

ArkTS 组件
C API
相关推荐
文档@ohos.data.uniformDataStruct (标准化数据结构)
文档OH_UdsContentForm
文档Text
文档SubHeader
文档基于标准化数据结构的控件 (ArkTS)
文档list
文档NotificationContent
文档@ohos.advertising.AdComponent (广告展示组件)
文档@ohos.settingsLite (设置信息)
文档@ohos.app.form.formBindingData (卡片数据绑定类)
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词