HarmonyOS实战—欧洲杯还可以这么玩?_harmony bind-CSDN博客

admin 生活指南 2024-05-19 46 0

HarmonyOS实战—欧洲杯还可以这么玩?_harmony bind-CSDN博客

六月以来,欧洲杯正让国内的体育迷陷入狂欢。特别是今晚,欧洲杯1/4决赛正式开启大幕,相信观看的国人会越来越多。

那么在鸿蒙手机上,设计一个欧洲杯卡片,用于在桌面提醒各位球迷可谓相得益彰,毕竟实时球讯,亮屏即达。

首先,我们需要分析一下欧洲杯赛事的卡片布局,如上图所示。

布局之中,有一张图片以及一段资讯文字同时,卡片自动轮播实时的欧洲资讯内容。

对于布局来说,很好理解,就是一个图片和一个文本内容。而卡片内容的自动轮播就是定时触发的内容替换。

当我们创建了一个鸿蒙App项目之后,我们需要在点击src右键进行卡片的创建,如下图所示:

如首图所示,因为是一个22的卡片,这里我们可以随意选择一个22的布局即可,反正后面的所有样式以及交互都需要修改。

到这里,我们的卡片就创建完成了。

而在项目之中,会多2个widget文件,一个是java之中的,用于卡片与用户的交互与生成。另一个是js里面的widget,用于界面的设计。

布局设计

既然卡片已经创建完成,也知道了欧洲杯赛事的卡片设计需要分2个步骤,那么这里我们先来实现其样式与布局,至于功能代码,后续介绍。

index.hml

首先,我们需要通过index.hml文件实现一个图片以及文本的布局。代码如下:

简单来说,就4行代码,毕竟布局很简单。

index.css

接着,设计我们欧洲杯赛事卡片的样式,代码如下:

index.json

最后,就是我们的交互以及卡片的数据,index.json决定了交互的方式以及数据,但是实现代码在java文件中,index.json只用作定义。代码如下:

如上面代码所示,这里定义了2个数据:titleName(欧洲杯赛事标题),imageUrl(欧洲杯赛事图片)。

还有一个路由跳转,毕竟点击资讯我们是为了查看详细的内容的。

卡片数据的初始化

当用户添加或者查看卡片内容时,它是有一个基本的数据的。所以,我们需要在java中获取图片以及文本然后传递给卡片。代码如下(WidgetImpl):

这里就是获取数据,然后传递到js卡片当中。

通过providerFormInfo.setJsBindingData()方法进行数据的初始化,而基础数据在ZSONObject中进行添加。

到这一步,读者可以运行App添加卡片,其已经具有展示的效果了。但是卡片不会自动替换数据,因为我们没有设置定时替换数据的代码。

卡片的定时更新

所以,我们需要给卡片设置定时的数据替换,让其轮播当前的所有欧洲杯赛事资讯。这样,新鲜资讯就可以通过这么一个2*2卡片全部显示出来。

代码如下(WidgetAbility):

这里,我们通过定义定时器任务每5秒进行更新卡片,同时在onCreateForm()函数中,启动定时任务。至于卡片的数据,通过随机数自动获取。

除此之外,我们还需要设置网络权限等基本的数据代码。

到这里,我们卡片的交互以及卡片的布局都已经设计完成,运行之后的效果也与首图一摸一样。

源代码下载地址:

本文正在参与“有奖征文 | HarmonyOS征文大赛”活动:

活动链接:

评论