鸿蒙项目云捐助第七讲鸿蒙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的标签当中，代码布局如下图所示。
设置乐成后，首页的内容可以向上拖动，并体现出“热门保举”的项目条。详细效果如下图所示。
至此，首页部门已大功告成。背面连续完成捐助页，捐助岛等相干的功能页面，请连续关注。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
|
发表于 
