一、创建项目
 

二、创建卡片
 

三、应用服务代码

Index.ets

@Entry
@Component
struct Index {@State TITLE: string = 'OpenHarmony';@State CONTEXT: string = '创新召见未来！';build() {Row() {Column() {Text(this.TITLE).fontSize(30).fontColor(0xFEFEFE).fontWeight(600)Text(this.CONTEXT).fontSize(30).fontColor(0xFEFEFE).fontWeight(600).margin(20)}.width('100%')}.width('100%').height('100%').backgroundColor(0x42218c)}
}

四、卡片代码
WidgetNewCard.ets

@Entry
@Component
struct WidgetNewCard {/** The title.*/readonly TITLE: string = 'OpenHarmony';readonly CONTEXT: string = '技术构建万物智联';/** The action type.*/readonly ACTION_TYPE: string = 'router';/** The ability name.*/readonly ABILITY_NAME: string = 'EntryAbility';/** The message.*/readonly MESSAGE: string = 'add detail';/** The with percentage setting.*/readonly FULL_WIDTH_PERCENT: string = '100%';/** The height percentage setting.*/readonly FULL_HEIGHT_PERCENT: string = '100%';build() {Row() {Column() {Text(this.TITLE).fontSize(14).fontColor(0xFEFEFE).fontWeight(600)Text(this.CONTEXT).fontSize(14).fontColor(0xFEFEFE).fontWeight(600)}.width(this.FULL_WIDTH_PERCENT)}.backgroundColor(0x42218c).height(this.FULL_HEIGHT_PERCENT).onClick(() => {postCardAction(this, {"action": this.ACTION_TYPE,"abilityName": this.ABILITY_NAME,"params": {"message": this.MESSAGE}});})}
}

五、运行案例
 

六、案例卡片效果

注释说明：

现最新版的DevEco Studio中OpenHarmony项目在本目录下调整。将runtimeOS:””中间内容调为OpenHarmony即可。这种方式，不用开发板，通过预览器就可以查看项目样式效果。
 

 

 

完整项目代码地址：

HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com