随着 HarmonyOS 2 的发布,服务卡片这一技术受到广大开发者的极大关注。它将重要信息或操作前置于此,实现实现即用即走,极大提升用户的使用体验,是 APP 的重要入口,使用户对 APP 有了重新认识。


图片

我们开发的此款服务卡片,以当下人们最为关注的教育为切入点,以小学生古诗词学习为立足点,将每日学习计划以服务卡片的形式展现出来。


使家长可以清晰直观的看到今天孩子该学习哪一首古诗,已经学习了多少首,处于计划哪一步。


将来,我们还会将此卡片配以分布式能力,让孩子在学习时,家长也可以通过手机来进行了解,共同完成学习计划,这款卡片取名为“乖宝宝”。


效果展示:

图片

图片

图片
图片

图片

创建“乖宝宝”APP 工程


①安装和配置 DevEco Studio 2.1 Release


安装的链接:

https://developer.harmonyos.com/cn/develop/deveco-studio

IDE 的使用指南,很详细:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

我的本案例使用的最新的 2.1.0.501 版本,SDK:API Version 5。


②选择一个模版,创建一个 Java Phone 应用


如下图:

图片

点击 Next:

图片

点击 Finish 完成创建乖宝宝 APP 工程。


③乖宝宝 APP 页面布局


首先完成乖宝宝 APP 页面的布局,代码如下:

图片

乖宝宝 APP 卡片实现


第一步:卡片生成


鼠标放在项目的包路径上,然后右击,点击“Service Widget”,然后就可以创建服务卡片:

图片

选择“Basic”高级模式,然后再 Template 中选择 “Grid Pattern”模板,然后点击 Next:
图片
然后给服务卡片起名字,这里要就写个“goodbabycard”,选择生成卡片的样式,分别为 2X2、2X4、4X4 规格,然后点击“Finish”完成创建。
图片
然后会生成相关的模板代码,如下是代码的框架:

图片

图片

然后对 MainAbility.java 和 form_grid_pattern_goodbabycard_*.xml 布局文件修改,并新增准备好的资源文件。


第二步:卡片布局的修改


我们制作了一个 2X2、2X4 和 4X4 的卡片,布局效果如下所示:


2X2 卡片布局:

图片

2X4 卡片布局:

图片

4X4 卡片布局:

图片

第三步:卡片信息创建、更新、删除


对卡片进行操作时,需要将创建的卡片信息持久化,以便在下次获取/更新该卡片实例时进行使用。


我们采用对象关系型数据库来存储卡片信息,主要是在卡片创建的回调函数 onCreateForm 和卡片销毁的回调函数 onDeleteForm 中存储和删除卡片信息。


卡片需要存储的信息包括:卡片 ID、卡片名称、卡片大小(2X2 还是 4X4 等),代码如下所示。


存储卡片信息:

图片

更新卡片信息:

图片

删除卡片信息:

图片

这样卡片创建完成。


第四步:卡片在桌面的创建方式


在手机桌面上卡片的创建方式分为:设为上滑卡片或添加到桌面,如下图:
图片

第五步:卡片的点击跳转


卡片默认跳转到乖宝宝 APP 主页,可以查看到当前 APP 上的古诗,点击古诗会自动跳转到对应古诗的详细内容页面。

图片

古诗详情页面:
图片
古诗页面跳转功能的重点代码如下:

图片

总结和回顾


本文通过乖宝宝+乖宝宝服务卡片,手把手的教会大家如何实现一个 HarmonyOS Java 卡片,你将学会以下知识点:

  • 如何使用模板创建 APP 工程

  • 如何使用模板创建服务卡片

  • 卡片的布局

  • 卡片信息创建、更新和删除过程

  • 卡片的点击跳转事件


除此以外,你还会学到:

  • 如何使用 ListContainer 做一个列表

  • 如何使用偏好型数据库,缓存网络数据

  • 如果使用对象关系型数据库,缓存卡片信息


👇点击关注鸿蒙技术社区👇

鸿蒙技术社区
鸿蒙技术社区
HarmonyOS(鸿蒙)技术社区是由51CTO和华为共同打造的综合性开发和应用技术社区。
153篇原创内容
公众号

了解鸿蒙一手资讯


图片

“阅读原文”了解更多

来源:https://mp.weixin.qq.com/s/LDBJGFbJqHVM8DpKMpMP_A
点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部