1# FormComponent 2 3提供卡片组件，实现卡片的显示功能。 4 5> **说明：** 6> 7> - 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 该组件为卡片组件的使用方，对应提供方的使用参考文档[JS服务卡片UI组件](../js-service-widget-ui/js-service-widget-file.md)。 10> 11> - 该组件使用需要具有系统签名。 12 13## 权限 14 15ohos.permission.REQUIRE_FORM 16 17 18## 子组件 19 20无 21 22 23## 接口 24 25FormComponent(value: { 26 id: number; 27 name: string; 28 bundle: string; 29 ability: string; 30 module: string; 31 dimension?: FormDimension; 32 temporary?: boolean 33 }) 34 35创建卡片组件，用于显示提供的卡片。 36 37**参数：** 38 39| 参数名 | 参数类型 | 必填 | 参数描述 | 40| --------- | ------------------------------- | ---- | ----------------------------------------------------------------------- | 41| id | number | 是 | 卡片标识（新建卡片填0）。 | 42| name | string | 是 | 卡片名称。 | 43| bundle | string | 是 | 目标卡片包名。 | 44| ability | string | 是 | 目标卡片Ability名称。 | 45| module | string | 是 | 卡片模块名称。 | 46| dimension | [FormDimension](#formdimension) | 否 | 卡片尺寸，支持2 * 2，4 * 4，4 * 2类型卡片。<br/>默认值：Dimension_2_2。 | 47| temporary | boolean | 否 | 卡片是否为临时卡片。 | 48 49## FormDimension 50 51| 名称 | 描述 | 52| -------------------------- | -------- | 53| Dimension_1_2 | 1*2 卡片 | 54| Dimension_2_2 | 2*2 卡片 | 55| Dimension_2_4 | 2*4 卡片 | 56| Dimension_4_4 | 4*4 卡片 | 57| Dimension_2_1<sup>9+</sup> | 2*1 卡片 | 58 59## 属性 60| 名称 | 参数类型 | 必填 | 描述 | 61| ----------- | ----------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------------------------------- | 62| size | {<br/>width?: [Length](ts-types.md#length),<br/>height?: [Length](ts-types.md#length)<br/>} | 是 | 设置高宽尺寸。 | 63| moduleName | string | 是 | 卡片模块名称。 | 64| dimension | [FormDimension](#formdimension) | 否 | 卡片尺寸，支持2 * 2，4 * 4，4 * 2类型卡片。<br/>默认值：Dimension_2_2。 | 65| allowUpdate | boolean | 否 | 是否允许卡片更新。<br/>默认值：true。 | 66| visibility | [Visibility](ts-appendix-enums.md#visibility) | 否 | 是否允许卡片可见。<br/>默认值：Visible。 | 67 68 69 70## 事件 71 72| 名称 | 功能描述 | 73| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | 74| onAcquired(callback: (info: { id: number }) => void) | 获取到卡片后触发，返回卡片的id. | 75| onError(callback: (info: { errcode: number, msg: string }) => void) | 组件加载错误回调。<br/>errcode: 错误码。<br/>msg: 错误信息。 | 76| onRouter(callback: (info: any) => void) | 组件路由事件回调,返回[routerEvent](../js-service-widget-ui/js-service-widget-syntax-hml.md#事件绑定)中的信息。 | 77| onUninstall(callback: (info: { id: number }) => void) | 组件卸载回调，返回卸载卡片的id. | 78 79 80## 示例 81 82```ts 83//card.ets 84@Entry 85@Component 86struct CardExample { 87 @State formId:number = 0; 88 build() { 89 Column() { 90 Text('this is a card') 91 .fontSize(50) 92 .fontWeight(FontWeight.Bold) 93 FormComponent({ 94 id:this.formId, 95 name:"Form1", 96 bundle:"com.example.cardexample", 97 ability:"FormAbility", 98 module:"entry", 99 dimension:FormDimension.Dimension_2_2, 100 temporary:false 101 }) 102 .allowUpdate(true) 103 .size({width:360,height:360}) 104 .visibility(Visibility.Visible) 105 .onAcquired((form)=>{ 106 console.log(`form info : ${JSON.stringify(form)}`); 107 this.formId = form.id; 108 }) 109 .onError((err)=>{ 110 console.log(`fail to add form, err: ${JSON.stringify(err)}`); 111 }) 112 113 } 114 .width('100%') 115 .height('100%') 116 } 117} 118``` 119 120
