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