鸿蒙项目云捐助第十八讲云捐助我的页面下半部分的实现 在一般的应用app中都会有一个“我的”页面,在“我的”页面中可以完成某些设置,也可以完成某些附加功能,如“修改密码”等相关功能。这里的鸿蒙云捐助也有一个“我的”功能页面。这里对“我的”功能页面进行布局设置。 这里的“我的”页面分为上下两部分。 一、“我的”页面大致规划 这里参考公益类捐助的上半部分,如下图所示。 一般在我的页面的下半部分会展示某些功能。这里大多采用豆腐块布局。如下图所示。 在“我的”页面的最上面还可以加入用户名的显示,如下图所示。 这里由于是捐助项目,可以在用户名的下面设置绑定的一张银行卡或者爱心卡。如下图所示。 通过分析大致的布局分为四部分,这里分别介绍。 之前介绍了第一部分和第二部分,这时开始实现第三部分。 二、第三部分爱心任务布局 这里实现爱心任务的豆腐块布局部分,形如下图所示的模板。 这里豆腐块对应的布局项目有“发布文章”,“完成任务”,”,“绑定银行卡”,“在线客服”四个选项。 这里由于是4个选项数据,还有4个选项图片,可以通过模拟数据的方式进行。首先在mockjs的目录中模抉options.js的数据,代码如下图所示。 由于爱心任务的部分豆腐块布局是由图标和文本产生的,因此模拟数据中包括mytxt的文本信息和icon的图片信息。在进行爱心任务的豆腐块布局时可以通过循环出所有数据进行布局,这里首先在Mine.ets组件中导入数据,如下图所示。 导入数据后在组件中循环遍历数据,然后进行图片Image组件和文字Text组件中每个块的上下布局。代码如下图所示。 这里通过首先定义大的弹性盒子Flex,属性direction其值为FlexDirection.Row的横向布局,在横向布局的弹性盒子Flex中通过ForEach循环数据,循环数据进行UI布局,这里使用弹性盒子Flex,属性direction其值为FlexDirection.Column的竖向排列,并且整体带border边框属性,设置一个灰色的实线边框,边框borderRadius设置其圆角属性,在竖向排列的弹性盒子Flex中,Image图像组件和Text文本组件进行上下排列,其中Image图像组件显示每一个爱心任务的图标,定义aspectRatio的拉伸大小为1,定义ObjectFit整体对图片大小的调整,这里设置其参数为ImageFit.Contain,使图标充满Image组件的宽width和高height,Image组件下面是Text文本组件,显示爱心任务的各个文本内容项。 第三部分布局成功后,进行第四部分的布局。 三、第四部分捐助功能模块布局 第四部分的模板样图如下图所示。 这里显示6个操作子项,也是通过文本和图片的组合形成豆腐块布局,首先需要在mockjs文件夹中建立模拟数据。模抉数据的代码如下图所示。 这里模拟数据是由icon图标和mytxt文本组成json数据的功能集合,这里的功能设置为“修改密码”,“查看捐赠”,”,“发布捐赠”,“我帮助过””,“我的订单”,”,“我的众筹”几个子项目组成的。模拟数据定义完成后需要导出才可以被组件使用,这里在最后使有export default导出数据。如下图所示。 导出数据后,可以在Mine.ets中导入数据。如下图所示。 “我的”页面经过3个部分的布局已超过一屏,可以在最外层加入Scroll组件。如下图所示。 整个build()方法中以Scroll组件把所有的元素包括在内,这样可以实现滑动滚屏。 第四部分捐款功能代码如下图所示。 这里最外层使用Flex的弹性盒子,定义direction方向为FlexDirection.Row横向排列,对其中的元素横向排列的,超出一行的使用{wrap:FlexWrap.Wrap}进行换行处理,在Flex弹性盒子中,使用ForEach遍历juan_datas中的的捐款功能模块数据,循环数据进行UI布局,这里使用弹性盒子Flex,属性direction其值为FlexDirection.Column的竖向排列,并且整体带border边框属性,设置一个灰色的实线边框,边框borderRadius设置其圆角属性,遍历出的每一项建立图片Image组件和文字Text组件的上下排列,Image图片组件使用图标,定义aspectRatio的拉伸大小为1,定义ObjectFit整体对图片大小的调整,这里设置其参数为ImageFit.Contain,使图标充满Image组件的宽width和高height,Image组件下面是Text文本组件,显示捐赠任务的各个文本内容项。 这里把第四个捐赠功能的组件上面加一个标题条,代码如下图所示。 这里定义的标题栏就是Text组件,设置其backgroundColor背景颜色为Color.Yellow的黄色,设置宽width和高height。 根据这个思想继续为第三个爱心模块功能上面添加一个标题条,代码如下图所示。 这里就完成了“我的”页面布局,这个组件需要导出才可以在主页index.ets中调用,导出时把@Entry的入口注解注释掉。 然后回到index.ets中,把“我的”组件在这里进行调用,如下图所示。 这时点击index.ets首页界面后,在index.ets中导入“我的”组件Mine,如下图所示。 导入Mine组件后,在Tabs的导航组件中进行调用,代码如下图所示。 显示出现Scroll的滑动异常,这里需要在原有的Mine.ets组件中云掉宽和高,代码如下图所示。 这里完成了“我的”页面搭建,并实现了整合。 后续会带来云捐助项目云使用的技术和不同的精彩,欢迎关注。