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