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征文大赛”活动：

活动链接：