Preset cards provided by the system allow you to quickly display data of uniform data structs.
When you need to display content, such as a title, description, image, and app information, and redirect users to the corresponding source when they tap the content, you can use a content card to quickly present the information. Simply call ContentFormCard and pass in ContentForm data, the card width and height, and a callback for the tap event to achieve a good display effect.
Starting from API version 20, you can use the content card component UdmfComponents.
The following table describes the ContentFormCard API.
| Name | Description |
|---|---|
| ContentFormCard({contentFormData: uniformDataStruct.ContentForm, formType: FormType, formWidth?: number, formHeight?: number, handleOnClick?: Function}) | Displays the passed content card data in a fixed style, invokes the callback upon a tap, and redirects to the configured page. |
// 1. Import required modules.
import { ContentFormCard, FormType, uniformDataStruct } from '@kit.ArkData';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
@State contentForm: uniformDataStruct.ContentForm = {
uniformDataType: 'general.content-form',
title: ''
};
@State startToShow: boolean = false;
aboutToAppear(): void {
// 2. Initialize data.
this.initData();
}
async initData() {
let context = this.getUIContext().getHostContext();
if (!context) {
return;
}
try {
let appIcon = await context.resourceManager.getMediaContent($r('app.media.startIcon').id);
let thumbImage = await context.resourceManager.getMediaContent($r('app.media.foreground').id);
this.contentForm = {
uniformDataType: 'general.content-form',
title: 'Content form title',
thumbData: thumbImage,
description: 'Content form description',
appIcon: appIcon,
appName: 'com.test.demo'
};
} catch (err) {
hilog.error(0xFF00, '[Sample_Udmf]', 'Init data error');
}
}
build() {
Column() {
Button('show card').fontSize(30)
.onClick(() => {
// 3. startToShow is changed to true upon a tap, and the page is re-rendered.
this.startToShow = true;
})
if (this.startToShow) {
// 4. Pass in corresponding parameters to the ContentFormCard API.
ContentFormCard({
contentFormData: this.contentForm,
formType: FormType.TYPE_SMALL,
formWidth: 220,
formHeight: 100,
handleOnClick: () => {
hilog.info(0xFF00, '[Sample_Udmf]', 'Clicked card');
}
})
}
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}