鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

最后设置首页的推荐模块，参考模板如下图所示。

一、首页热门推荐模块的实现

对于热门推荐模块，先有上面的小标题栏，这里的标题栏也有一个小图标，首先从“百度图库”中搜索热门推荐的图标。

然后把下载的热门小图标放在resources文件夹下的base文件夹下的media目录中，如下图所示。

有了图标的准备，还需要文字，文字需要把资源放在resources目录下的zh_CN目录下的string.json文件中，如下图所示。

有了图标和文字，就可以使用Flex弹性盒子继续布局IndexComponent的组件，代码如下图所示。

这里弹性盒子Flex使用FlexDirection.Row进行横向布局，由于只有图标和文字两个元素，这里使用FlexAlign.SpaceBetween进行两端对齐，图标在左边，文字在右边，弹性盒子Flex又使用alignItem的ItemAlign.Center进行竖向居中。

对于Flex中的Image和Text也是添加资源后，对于Image添加width宽和height高，对于Text添加fontColor的字体颜色。

整体的Flex热门推荐小题目条也需要添加backgroundColor的背景颜色，margin的外边距和padding的内边距，这里的外边距只添加上部的外边距，其大小是20。

设置热门推荐条后

接下来就需要首页推荐项目的条目设置，这里参照的布局模板如下图所示。

从模板上看，需要收集4幅热门推荐的图片，这里可以从“百度图库”中搜索捐助类相关的推荐类项目图片，如下图所示。

这里通过搜索找到4幅图片，把图片放在项目resources目录的base目录下的media目录中。如下图所示。

这个组件还是在首页中显示，代码需要写在IndexComponent的组件中，同时这里也需要热门捐助图片及热门捐助文字的组合，也需要建立json数据文件进行图片和文字的对应关系，在之前创建的文件夹mockjs的目录下建立remmand.js的数据模拟文件，如下图所示。

这里创建recommand.js文件后，使用const方法定义recommand的推荐数组参数，最后使有export导出定义的数组参数。代码如下图所示。

有了模拟数据后，按照之前首页模块中图片文字对应关系的开发思想，还需要有一个鸿蒙ArkTS的类与推荐的数据进行对应。由于这里需要的也是图片和文字，因此与之前建立的某些鸿蒙类相似，我们就使用之前创建的鸿蒙类MyNews来对应推荐模块的功能。代码如下图所示。

有了模拟数据和鸿蒙类对象后就可以进行IndexComponent首页组件的推荐功能列表实现。这里首先导入模拟的推荐列表数据，如下图所示。

导入数据后，就可以在IndexComponent组件中的build()方法中添加推荐模块布局代码。代码如下图所示。

这里也使用Flex的弹性盒子，弹性盒子使用{wrap:FlexWrap.Wrap}声明当元素超出一行后进行换行处理。在Flex弹性盒子中使用ForEach遍历所有的推荐数据数组，对于每一个遍历的子项item就是鸿蒙MyNews类,在ForEach的循环体中有UI的组件Column()对其中的元素进行竖向列排列,这里需要排列的有Image图像组件和Text文本组件。文本Text组件和Image图像组件分别设置width宽度,在Image组件中设置width宽度和height高度。对于整体包括图像组件Image和文字组件Text的元素Column()列元素设置其border边框及height高度,还有margin外边距和padding的内边距。

代码在DevEco Studio编辑工具的预览窗口中预览得到的结果如下图所示。

这里显示布局混乱是由于首页中轮播图组件,分类导航组件再加上资讯组件及热门捐赠组件竖向排列在一起,已经超出了手机屏幕显示的一屏,需要使用鸿蒙Next的Scroll进行屏幕的滚动。

设置Scroll元素标签时，把首页组件中Swiper的滑动轮播，分类导航组件Flex，资讯分类组件Flex及热门推荐组件Flex都放在Scroll的标签中，代码如下图所示。

图中阴影部分的代码需要全部放在Scroll的标签当中，代码结构如下图所示。

设置成功后，首页的内容可以向上拖动，并显示出“热门推荐”的项目条。具体效果如下图所示。

至此，首页部分已大功告成。后面持续完成捐助页，捐助岛等相关的功能页面，请持续关注。