欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > 【HarmonyOS开发】静态服务卡片

【HarmonyOS开发】静态服务卡片

2025/10/27 10:51:28 来源:https://blog.csdn.net/Oneal5354/article/details/140570595  浏览:    关键词:【HarmonyOS开发】静态服务卡片

简介

服务卡片框架提供了FormExtensionAbility基类,通过继承此基类,实现调用服务卡片的生命周期函数,来实现具体卡片的功能。
开放了属性动画和显式动画,增加了自定义绘制的能力,可以使用Canvas画布组件自定义绘制和构建更多样的显示和交互效果。允许卡片中运行逻辑代码,业务逻辑可以在卡片内部自闭环。

不支持功能

  • 不支持导入共享包。
  • 不支持native语言,仅支持声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。
  • 暂不支持极速预览。
  • 暂不支持setTimeOut。

工程目录

在这里插入图片描述

新建流程(静态服务窗口)

1.选择静态服务窗口
在这里插入图片描述

2.选择项目模板
在这里插入图片描述
3.设置卡片名称、简介、模块大小等

在这里插入图片描述
4.根据选择的样板,自动添加卡片项目相关文件。
在这里插入图片描述
5.默认的预览视图
在这里插入图片描述
6.需要修改卡片配置,可以去form_config.json中设置

卡片事件(静态卡片)

在这里插入图片描述

案例代码

实现效果
在这里插入图片描述

项目架构

在这里插入图片描述

DateUtil.ets

export class DateUtil {/*** 返回时间* @param date* @returns 14:53样式的时间*/static ToTime(date: Date): string {if (date == null) {return "";}return `${DateUtil.PrefixInteger(date.getHours(), 2)}:${DateUtil.PrefixInteger(date.getMinutes(), 2)}`}/*** 返回月份和周几* @param date* @returns 返回6月17日(周一)的样式*/static ToMonthDay(date: Date): string {if (date == null) {return "";}const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]return `${date.getMonth() + 1}月${date.getDate()}(${weekDays[date.getDay()]})`}static PrefixInteger(num: number, length: number) {return (Array(length).join('0') + num).slice(-length);}
}

Ticket_WidgetCard.ets

import { TicketShow_ViewModel } from '../viewmodel/TicketShow_ViewModel'
import { TicketShow_View } from '../view/TicketShow_view'@Entry
@Component
struct Ticket_WidgetCard {/** action的类型*/readonly ACTION_TYPE: string = 'router';/** action为router / call 类型时跳转的UIAbility名*/readonly ABILITY_NAME: string = 'EntryAbility';/** The message.*/readonly MESSAGE: string = 'add detail';/** The height percentage setting.*/readonly FULL_HEIGHT_PERCENT: string = '100%';@State ticketShowVM: TicketShow_ViewModel = new TicketShow_ViewModel("G6357",new Date(2024, 5, 17, 14, 33),new Date(2024, 5, 17, 20, 0),"凤凰古城","广州","二等车 06车 05F号");build() {FormLink({action: this.ACTION_TYPE,abilityName: this.ABILITY_NAME,params: {message: this.MESSAGE}}) {Stack({ alignContent: Alignment.BottomEnd }) {TicketShow_View({viewModel: this.ticketShowVM}).margin(10)Image($r('app.media.railway')).height(80).opacity(0.3).margin({ bottom: 10, right: 20 })}.height(this.FULL_HEIGHT_PERCENT).width("100%").backgroundColor('#00000000').linearGradient({angle: 90,colors: [["#1f82ca", 0.0], ["#24c8df", 1.0]]})}}
}

TicketShow_view.ets

import { DateUtil } from '../../common/DateUtil';
import { TicketShow_ViewModel, TicketStage } from '../viewmodel/TicketShow_ViewModel'@Component
export struct TicketShow_View {@ObjectLink viewModel: TicketShow_ViewModel/*** 字体颜色*/readonly TEXT_COLOR: ResourceColor = Color.White;build() {Column() {Row() {Column() {Text(DateUtil.ToTime(this.viewModel.BoardingTime)).fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.TEXT_COLOR)Text(this.viewModel.BoardingAddress).fontSize(14).margin({ top: 5 }).fontColor(this.TEXT_COLOR)}.height("100%").layoutWeight(1).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start)Column() {Text(this.viewModel.Id).fontSize(14).fontColor(this.TEXT_COLOR)Path().commands('M0 0 L300 0 L270 -10 L270 0 Z').margin({ top: 4 }).strokeWidth(1).fill(this.TEXT_COLOR).stroke(this.TEXT_COLOR)Text(DateUtil.ToMonthDay(this.viewModel.BoardingTime)).fontSize(12).margin({ top: 5 }).fontColor(this.TEXT_COLOR)}.height("100%").layoutWeight(2).justifyContent(FlexAlign.Start)Column() {Text(DateUtil.ToTime(this.viewModel.ArrivalTime)).fontSize(20).fontWeight(FontWeight.Bold).fontColor(this.TEXT_COLOR)Text(this.viewModel.ArrivalAddress).fontSize(14).margin({ top: 5 }).fontColor(this.TEXT_COLOR)}.height("100%").layoutWeight(1).alignItems(HorizontalAlign.End).justifyContent(FlexAlign.Start)}.width("100%").layoutWeight(2).margin({ top: 20 })Column() {Text(this.viewModel.Position).fontSize(12).fontColor(this.TEXT_COLOR)Row() {Text("状态:").fontSize(12).fontColor(this.TEXT_COLOR)Text(TicketStage[this.viewModel.Stage]).fontSize(12).fontColor(this.TEXT_COLOR)}.margin({ top: 5 })}.width("100%").layoutWeight(1).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start)}.width("100%").height("100%")}
}

TicketShow_ViewModel.ets

/*** 展示组件的ViewModel*/
@Observed
export class TicketShow_ViewModel {/*** 火车编号*/public Id: string = '';/*** 开始时间*/public BoardingTime: Date = new Date();/*** 到达时间*/public ArrivalTime: Date = new Date();/*** 起始站*/public BoardingAddress: string = "";/*** 终点站*/public ArrivalAddress: string = "";/*** 座位*/public Position: string = "";/*** 状态*/public Stage: TicketStage = TicketStage.待车constructor(id: string,boardingTime: Date,arrivalTime: Date,boardingAddress: string,arrivalAddress: string,position: string) {this.Id = id;this.BoardingTime = boardingTime;this.BoardingAddress = boardingAddress;this.ArrivalTime = arrivalTime;this.ArrivalAddress = arrivalAddress;this.Position = position;}public isDraft(): boolean {return true;}
}/*** 车票状态*/
export enum TicketStage {待车,正在检票,停止检票
}

注意

里面的图片是需要自己去下载的,暂未实现数据和程序联动

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词