HarmonyOS实战—欧洲杯还可以这么玩？（一）

HarmonyOS实战

前言

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

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

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

1.布局之中，有一张图片以及一段资讯文字

2.同时，卡片自动轮播实时的欧洲资讯内容。

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

创建卡片

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

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

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

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

卡片的样式开发

布局设计

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

index.hml

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

<div class="card_root_layout" onclick="routerEvent1">
    <image class="div_image" src="{{imageUrl}}"/>
    <text class="div_text">{{titleName}}</text>
</div>

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

index.css

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

.card_root_layout {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 10px;
    height: 100%;
}
.div_image{
    width: 200px;
    height: 112px;
    object-fit: fill;
}
.div_text{
    margin-top: 5px;
    font-size: 10px;
    color: black;
    font-family: sans-serif;
}

index.json

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

{
  "data": {
    "titleName": "",
    "imageUrl": ""
  },
  "actions": {
    "routerEvent1": {
      "action": "router",
      "abilityName": "com.liyuanjinglyj.europeancup.widget.WidgetAbility",
      "params": {
        "message": "button"
      }
    }
  }
}

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

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