• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 基于标准化数据结构的控件 (ArkTS)
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## 场景介绍
10
11我们提供了部分标准化数据结构的预置卡片，当需要展示标准化数据结构数据时，可以直接引用提供的预置卡片，快捷地展示数据。
12
13## 内容卡片控件
14
15在需要展示内容（标题、描述、图片、应用信息）并在点击后跳转至对应来源时，可以使用内容卡片快速的展示信息。开发者只需要调用[ContentFormCard](../reference/apis-arkdata/js-apis-data-UdmfComponents.md#contentformcard)接口，传入[ContentForm](../reference/apis-arkdata/js-apis-data-uniformDataStruct.md#contentform14)数据、卡片宽高、点击事件回调函数即可获得良好的展示效果。
16
17从API version 20开始，支持使用[内容卡片控件](../reference/apis-arkdata/js-apis-data-UdmfComponents.md)。
18
19### 接口说明
20
21以下为内容卡片接口介绍：
22
23| 接口名称                                                                                    | 描述                                          |
24|-----------------------------------------------------------------------------------------|---------------------------------------------|
25| ContentFormCard({contentFormData: uniformDataStruct.ContentForm, formType: FormType, formWidth?: number, formHeight?: number, handleOnClick?: Function}) | 按照固定的样式展示传入的内容卡片数据，并在点击操作时，执行回调函数，并跳转至配置的页面。 |
26
27### 开发示例
28
29```ts
30// 1. 导入需要的模块
31import { ContentFormCard, FormType, uniformDataStruct } from '@kit.ArkData'
32
33@Entry
34@Component
35struct Index {
36  @State contentForm: uniformDataStruct.ContentForm = {
37    uniformDataType: 'general.content-form',
38    title: ''
39  };
40  @State startToShow: boolean = false;
41
42  aboutToAppear(): void {
43    // 2. 初始化数据
44    this.initData();
45  }
46
47  async initData() {
48    let context = this.getUIContext().getHostContext();
49    if (!context) {
50      return;
51    }
52    try {
53      let appIcon = await context.resourceManager.getMediaContent($r('app.media.startIcon').id);
54      let thumbImage = await context.resourceManager.getMediaContent($r('app.media.foreground').id);
55      this.contentForm = {
56        uniformDataType: 'general.content-form',
57        title: "Content form title",
58        thumbData: appIcon,
59        description: "Content form description",
60        appIcon: thumbImage,
61        appName: "com.test.demo"
62      };
63    } catch (err) {
64      console.error("Init data error");
65    }
66  }
67
68  build() {
69    Column() {
70      Button('show card')
71        .onClick(() => {
72          // 3. 点击后startToShow变为true，页面重新渲染
73          this.startToShow = true;
74        })
75      if (this.startToShow) {
76        // 4. 使用内容卡片，传入对应的参数
77        ContentFormCard({
78          contentFormData: this.contentForm,
79          formType: FormType.TYPE_SMALL,
80          formWidth: 110,
81          formHeight: 50,
82          handleOnClick: () => {
83            console.info("Clicked card");
84          }
85        })
86      }
87    }
88  }
89}
90```