鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现

前面的教程中已实现了启动页，登录页，注册页及首页的部分功能。这里有一些朋友提出问题，如何设置登录页面的背景图片。这里稍带说一个这个功能的实现。

一、登录页面的背景图片实现

###首先需要具有一张登录背景的图片，这里也是通过百度搜索，找到一幅山水画，如下图所示。

这里选择一幅山水画放在鸿蒙Next项目resources目录下的media目录下。如下图所示。

这里的背景图命名为bj.png,把这张图做为背景图只需要把布局文件中最外层的元素设置backgroundImage属性方法即可,同时也需要注意图片与背景的尺寸调整,可以使用backgroundImageSize来调整尺寸。代码如下图所示。

这里的图片背景尺寸backgroundImageSize设置为ImageSize.Fill进行充满整个背景。

当属性设置后，在预览中看到的效果图如下图所示。

当然，如果你的图片比较小，也可以设置背景图片的重复，这里使用backgroundImage后面跟上参数ImageRepeat，根据重复的X轴和Y轴设定重复的具体效果。代码修改如下图所示。

接下来，继续回入正题，这里进行首页中其它功能模块的布局。

根据首页布局的模板图片，如下图所示。

这里需要继续实现分类导航的功能，也就是横排的每一个小图标排列成的5*5的矩阵方格。

二、分类导航的布局

首先也是准备一个分类导航的icon图标，可以从“百度图库”中搜索相应的图标。如下图所示。

这里可以从“百度图库”中下载8个图标文件，然后把下载的文件拷贝到resources目录下的base目录下的media文件夹中。如下图所示。

这里的图片采用heart+数字的命名方式，罗列了8个不同名字的图标文件。

接下来回到分类导航应该存在页面中，这个分类导航应该放在首页中，因此这里打开的是component目录下的IndexComponent组件。如下图所示。

这里写分类导航也是使有Flex的弹性盒子，把这个Flex写在Swiper滑动轮播组件的下面。如下图所示。

接下来需要在这个Flex的组件中显示8个元素的图片和文字的组合，这里也有一个图标和文字的对应关系，一般两值对应可以采用json值对的数据结构进行保存，在这个文件中引入json数据，由于这个数据是固定的分类，因此是一个常量，鸿蒙Next中的常量使用const来定义。在IndexComponent组件中引入分类导航的数据。如下图所示。

引数据后，在编辑器中显示红色的波浪线， 在鸿蒙Next的开发过程中,DevEco Studio工具会把报错部分划成红色的波浪线.这里引入const的常量后报错,证明不支持这种引用方式,这里采用另外一种导出数据的方式。在鸿蒙Next目录下建立mockjs的文件夹,其目的是为了模拟数据,在后期结合华为云进行开发时,可以把这部分数据注释掉。这里先完成mockjs文件夹的建立,如下图所示。

这里entry入口文件夹的ets目录上右键,然后选择“New”--->“Directionary”,并把这个文件夹命令为mockjs,也就是建立一个mockjs的模拟数据文件夹。接下来在这个文件夹下建立一个分类数据的js文件,其命名为catgory_data.js文件,如下图所示。

这里就在mockjs中建立category_data.js文件,然后把const常量定义的代码放入其中,这里从文字和图片上把捐助的项目分为慈善捐助、爱佑新生、公益捐助、助学圆梦、扶老助残、慈善军营、免费捐助、突发事件等分类。

现在需要在代码的最后加入export default语句，将这个变量导出。如下图所示。

这里就是通过export default导出一个category的分类数据。

数据导出成功后，在IndexComponent中引入这个数据就可以实现数据的调用。引用方法如下图所示。

导入数据后，由于这个数据是一个值对组成的数组结构，也就是分类导航的数据列表，鸿蒙Next提供了ForEach结构遍历这个数据，然后在ForEach的循环体中可以使用UI组件进行布局。ForEach结构如下。

ForEach(
    arr: Array,
    itemGenerator: (item: Object, index: number) => void,
    keyGenerator?: (item: Object, index: number) => string
    )
arr表示数据源，为Array类型的数组。
itemGenerator表示组件生成函数。为数组中的每个元素创建对应的组件。
keyGenerator表示键值生成函数。为数据源arr的每个数组项生成唯一且持久的键值。函数返回值为开发者自定义的键值生成规则。

这里使用这个结构遍历导入的category_data的分类数据，在ForEach的循环体中进行布局设计，代码如下图所示。

###图中使用ForEach时后面的遍历项item有红色波浪线，这是鸿蒙Next对数据类型比较严格，需要指明item的数据类型，item的数据类型就是遍历出来的分类导航数据的结构，因此这里需要定义一个导航数据结构的鸿蒙类。这里可以在ets中右键，选择创建数据模型的文件夹data，创建后建立MyCategory.ets的鸿蒙类文件，在这个类文件中有icon表示图标，有mytxt表示图标下面的文本。代码如下图所示。

这里的鸿蒙类文件中有两个属性，icon和mytxt，需要注意的是，在这个类文件中必须有constrcutor的构造函数，并把这两个属性填入其中做为参数，在constrcutor的构造函数体中把当前的全局变量赋值给局部变量。

鸿蒙分类导航类MyCategory创建成功后，可以在ForEach的item后面指明循环的数据类型，这里就不会报错了。代码如下图所示。

代码中在Flex后面加入了{wrap:FlexWrap.Wrap}的换行处理，表示指定宽度中如果不能显示所有的图标，图标会自动切换成两行或者多行。在Flex的元素中只有一个孩子元素就是Column（）,表示分类导航每一个子项都是竖向列式排列，在列多排列中首先需要有一个Image的组件。这个组件暂时指定了width宽度和height高度。不过如果图片过大，也需要图片的等比例缩放。这时布局中Image的属性方法修改代码如下图所示。

这里为Image图片组件引入了aspectRatio表示等比例缩放，其值为1表示缩放度为1,然后后面有borderRadius进行圆角处理，这里圆角的幅度比较大，是为了构建一个圆形的效果。Image组件的下面是Text的分类导航的分类文本显示。这里需要查看预览效果的话，需要到index.ets文件中进行预览，因为IndexComponent是index.ets的子组件，在IndexComponent中没有@Entry的注解说明。打开index.ets文件后得到的预览结果图如下所示。

分类导航布局成功后，继续进行下面的资讯类部分设置。效果如下图所示。

三、首页资讯类容的布局

首页中资讯类的布局也需要先收集图片的素材，继续从“百度图库”中搜索资讯类的图标。如下图所示。

收集图标后，需要把图标文件还是存放在resources文件夹下base目录中的media文件夹下，如下图所示。

这里引入了资讯类的4个图标文件。由于资讯类的布局也是由图标和文字两部组成的,这里还需要模拟相关的资讯类数据,在之前建立的mockjs文件夹下建立一个资讯类的文件new.js。如下图所示。

这里指明的是模拟数据的目录mockjs,在其中建立的new.js的代码如下图所示。

这里建立了一个数组数据news,数据中提供了icon图标,mytitle主标题,mysubtitle副标题的三个json数据结构。由于这里显示了3个属性的数据,就需要对应的鸿蒙数据类与之对应,这个鸿蒙数据类也需要有三个属性, icon图标,mytitle主标题, mysubtitle副标题。代码如下图所示。

注意,这里的构造函数也需要传入三个参数,否则会报错,同时三个属性的名称需要与模拟数据的三个属性同名。

接下来继续在IndexComponent组件中导入已经建好的资讯数据,代码如下图所示。

导入数据成功后,资讯类的布局也可以通过ForEach循环来进行布局,在布局时分析一下资讯类的每一个资讯项的布局特点,如下图所示。

根据这样的布局思想及ForEach的使用方法结合起来,可以得到资讯的布局代码如下图所示。

这里最外层仍然使用Flex进行弹性盒子的布局,也设置了弹性盒子的{wrap:FlexWrap.Wrap}属性,当资讯类模块的长度超出屏幕长度时会自动换行处理。在Flex弹性盒子里面进行ForEach的循环布局，循环中的每一个元素item其类型为创建的鸿蒙资讯类MyNews，在ForEach的循环体内，整体是一个Column()的竖向排列，也就是每一个资讯类项目竖向排列，在每一个资讯类模块中先进行Row()的横向排列，把图标和文字放在一行来处理，文字有主标题和副标题，使用Column()的竖向排列把主标题和副标题排列起来。另外对于Image设置辅助的属性方法width宽度和height高度，对于Text文字类组件设置fontSize字体大小及fontWeight是否加粗等属性方法。

这样在预览中得到的资讯类模块布局如下图所示。

这样首页就布局成功了轮播功能，分类导航功能及最新资讯功能，后面持续完成首页、捐助页等相关的功能页面，请持续关注。