1# @ohos.data.UdmfComponents(内容卡片) 2<!--Kit: ArkData--> 3<!--Subsystem: DistributedDataManager--> 4<!--Owner: @jcwen--> 5<!--Designer: @junathuawei1; @zph000--> 6<!--Tester: @lj_liujing; @yippo; @logic42--> 7<!--Adviser: @ge-yafang--> 8 9针对[ContentForm](js-apis-data-uniformDataStruct.md#contentform14)标准数据结构的内容卡片，支持设置标题（必选）、描述、应用图标、应用名称、跳转链接、内容图片。用户点击卡片时，执行传入的回调事件函数，若设置的跳转链接不为空，则跳转到指定的页面。 10 11> **说明：** 12> 13> 该组件从API Version 20开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 导入模块 16 17```js 18import { ContentFormCard, FormType } from '@kit.ArkData'; 19``` 20 21## 子组件 22 23无 24 25## ContentFormCard 26 27ContentFormCard({contentFormData: uniformDataStruct.ContentForm, formType: FormType, formWidth?: number, formHeight?: number, handleOnClick?: Function}) 28 29内容卡片控件，用于在应用内展示标题、描述、内容图片、应用信息等。 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.DistributedDataManager.UDMF.Core 34 35| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 36| -------- | -------- | -------- | -------- | -------- | 37| contentFormData | [uniformDataStruct.ContentForm](js-apis-data-uniformDataStruct.md#contentform14) | 是 | - | 内容卡片数据。 | 38| formType | [FormType](#formtype) | 是 | @Prop | 内容卡片类型，影响内容卡片的大小。 | 39| formWidth | number | 否 | @Prop | 卡片宽度，其范围在设置的内容卡片类型默认宽度的0.8 ~ 1.2倍之间，当formType为TYPE_SMALL时，其范围在设置的内容卡片类型默认宽度的0.4 ~ 1.2倍之间。 | 40| formHeight | number | 否 | @Prop | 卡片高度，当contentFormData中的title为空字符串时，卡片高度为传入的值，否则其范围在设置的内容卡片类型默认宽度的0.8 ~ 1.2倍之间，当formType为TYPE_SMALL时，其范围在设置的内容卡片类型默认宽度的0.4 ~ 1.2倍之间。 | 41| handleOnClick | Function | 否 | - | 点击事件回调函数。 | 42 43## FormType 44 45内容卡片类型枚举，提供了大、中、小三种尺寸。 46 47**系统能力：** SystemCapability.DistributedDataManager.UDMF.Core 48 49| 名称 | 值 | 说明 | 50|-------------|---|-------------------| 51| TYPE_BIG | 0 | 表示 4 x 4 的尺寸。默认卡片宽度为200，默认高度为200。 | 52| TYPE_MID | 1 | 表示 4 x 2 的尺寸。默认卡片宽度为200，默认高度为100。 | 53| TYPE_SMALL | 2 | 表示 2 x 1 的尺寸。默认卡片宽度为137， 默认高度为83。 | 54 55## 示例 56 57```ts 58import { uniformDataStruct } from '@kit.ArkData' 59 60@Entry 61@Component 62struct Index { 63 @State contentForm: uniformDataStruct.ContentForm = { 64 uniformDataType: 'general.content-form', 65 title: '' 66 }; 67 @State startToShow: boolean = false; 68 69 aboutToAppear(): void { 70 this.initData(); 71 } 72 73 async initData() { 74 let context = this.getUIContext().getHostContext(); 75 if (!context) { 76 return; 77 } 78 try { 79 let appIcon = await context.resourceManager.getMediaContent($r('app.media.startIcon').id); 80 let thumbImage = await context.resourceManager.getMediaContent($r('app.media.foreground').id); 81 this.contentForm = { 82 uniformDataType: 'general.content-form', 83 title: "Content form title", 84 thumbData: appIcon, 85 description: "Content form description", 86 appIcon: thumbImage, 87 appName: "com.test.demo" 88 }; 89 } catch (err) { 90 console.error("Init data error"); 91 } 92 } 93 94 build() { 95 Column() { 96 Button('show card') 97 .onClick(() => { 98 this.startToShow = true; 99 }) 100 if (this.startToShow) { 101 ContentFormCard({ 102 contentFormData: this.contentForm, 103 formType: FormType.TYPE_SMALL, 104 formWidth: 110, 105 formHeight: 50, 106 handleOnClick: () => { 107 console.info("Clicked card"); 108 } 109 }) 110 } 111 } 112 } 113} 114``` 115 116