鸿蒙项目云捐助第十八讲云捐助我的页面下半部分的实现

news2024/12/20 22:31:22

鸿蒙项目云捐助第十八讲云捐助我的页面下半部分的实现

在一般的应用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组件中云掉宽和高,代码如下图所示。

这里完成了“我的”页面搭建,并实现了整合。

后续会带来云捐助项目云使用的技术和不同的精彩,欢迎关注。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2262934.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flink2.0未来趋势中需要注意的一些问题

手机打字,篇幅不长,主要讲一下FFA中关于Flink2.0的未来趋势,直接看重点。 Flink Forward Asia 2024主会场有一场关于Flink2.0的演讲,很精彩,官方也发布了一些关于Flink2.0的展望和要解决的问题。 1.0时代和2.0时代避免…

《深入浅出Apache Spark》系列⑤:Spark SQL的表达式优化

导读:随着数据量的快速增长,传统的数据处理方法难以满足对计算速度、资源利用率以及查询响应时间的要求。为了应对这些挑战,Spark SQL 引入了多种优化技术,以提高查询效率,降低计算开销。本文从表达式层面探讨了 Spark…

在Tomcat中部署应用时,如何通过域名访问而不加端口号

--江上往来人,但爱鲈鱼美。 --君看一叶舟,出没风波里。 在Tomcat中部署应用时,如果你希望通过域名访问而不加端口号(默认HTTP端口80或HTTPS端口443),你通常需要在前端使用一个反向代理服务器(如…

如何测量分辨率

一、什么是分辨率? 分辨率指的是分清物体细节的能力。分辨率是一个成像系统还原空间频率的能力。一些人只是简单的用分辨率去描述极限分辨率,但是相机在在不同的对比度的情况下还原低,中和高频率的能力,也可以显示全面综合的信息。…

Leetcode分隔链表

java 实现 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }* }*/ class …

maui开发成生安卓apk,运行提示该应用与此设备的CPU不兼容

在生成.NET MAUI安卓应用时遇到“该应用与此设备的CPU不兼容”的问题,确保你的.NET MAUI应用支持的Android目标框架与设备CPU架构相匹配。例如,如果你的应用是为ARM64架构编译的,而你的设备是x86架构,就会出现不兼容的问题。 一、…

在 Unity 6 中使用APV为您的世界创建全局照明的新方法(一)

Unity 6 中推出的新照明功能让您能够更快速、更高效的完成对烘焙场景的照明工作,在本文中我们将与大家详细分享在 Unity 6 中应用自适应探针卷创建快速全局光照的更多细节与具体应用方法。由于内容比较丰富,我们将把内容分为三篇文章,以便大家…

深度学习之超分辨率算法——FRCNN

– 对之前SRCNN算法的改进 输出层采用转置卷积层放大尺寸,这样可以直接将低分辨率图片输入模型中,解决了输入尺度问题。改变特征维数,使用更小的卷积核和使用更多的映射层。卷积核更小,加入了更多的激活层。共享其中的映射层&…

VSCode 搭建Python编程环境 2024新版图文安装教程(Python环境搭建+VSCode安装+运行测试+背景图设置)

名人说:一点浩然气,千里快哉风。—— 苏轼《水调歌头》 创作者:Code_流苏(CSDN) 目录 一、Python环境安装二、VScode下载及安装三、VSCode配置Python环境四、运行测试五、背景图设置 很高兴你打开了这篇博客,更多详细的安装教程&…

使用Docker启用MySQL8.0.11

目录 一、Docker减小镜像大小的方式 1、基础镜像选择 2、减少镜像层数 3、清理无用文件和缓存 4、优化文件复制(COPY和ADD指令) 二、Docker镜像多阶段构建 1、什么是dockers镜像多阶段构建 1.1 概念介绍 1.2 构建过程和优势 2、怎样在Dockerfil…

Windows安全中心(病毒和威胁防护)的注册

文章目录 Windows安全中心(病毒和威胁防护)的注册1. 简介2. WSC注册初探3. WSC注册原理分析4. 关于AMPPL5. 参考 Windows安全中心(病毒和威胁防护)的注册 本文我们来分析一下Windows安全中心(Windows Security Center…

Hive其一,简介、体系结构和内嵌模式、本地模式的安装

目录 一、Hive简介 二、体系结构 三、安装 1、内嵌模式 2、测试内嵌模式 3、本地模式--最常使用的模式 一、Hive简介 Hive 是一个框架,可以通过编写sql的方式,自动的编译为MR任务的一个工具。 在这个世界上,会写SQL的人远远大于会写ja…

时空AI赋能低空智能科技创新

随着人工智能技术的不断进步,时空人工智能(Spatio-Temporal AI,简称时空AI)正在逐渐成为推动低空经济发展的新引擎。时空AI结合了地理空间智能、城市空间智能和时空大数据智能,为低空智能科技创新提供了强大的数据支持…

java 通过jdbc连接sql2000方法

1、java通过jdbc连接sql2000 需要到三个jar包:msbase.jar mssqlserver.jar msutil.jar 下载地址:https://download.csdn.net/download/sunfor/90145580 2、将三个jar包解压到程序中的LIB下: 导入方法: ①在当前目录下&#xff…

web实验二

web实验二 2024.12.19 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>青岛理工大学</title>&l…

纯前端实现更新检测

通过判断打包后的html文件中的js入口是否发生变化&#xff0c;进而实现前端的代码更新 为了使打包后的文件带有hash值&#xff0c;需要对vite打包进行配置 import { defineConfig } from vite; import vue from vitejs/plugin-vue; import { resolve } from path; import AutoI…

云原生周刊:Kubernetes v1.32 正式发布

开源项目推荐 Helmper Helmper 简化了将 Helm Charts导入OCI&#xff08;开放容器倡议&#xff09;注册表的过程&#xff0c;并支持可选的漏洞修复功能。它确保您的 Helm Charts不仅安全存储&#xff0c;还能及时应用最新的安全修复。该工具完全兼容 OCI 标准&#xff0c;能够…

【游戏中orika完成一个Entity的复制及其Entity异步落地的实现】 1.ctrl+shift+a是飞书下的截图 2.落地实现

一、orika工具使用 1)工具类 package com.xinyue.game.utils;import ma.glasnost.orika.MapperFactory; import ma.glasnost.orika.impl.DefaultMapperFactory;/*** author 王广帅* since 2022/2/8 22:37*/ public class XyBeanCopyUtil {private static MapperFactory mappe…

如何在繁忙的生活中找到自己的节奏?

目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…

CORDIC 算法实现 _FPGA

注&#xff1a;本文为 “CORDIC 算法” 相关文章合辑。 未整理去重。 如有内容异常&#xff0c;请看原文。 Cordic 算法的原理介绍 乐富道 2014-01-28 23:05 Cordic 算法知道正弦和余弦值&#xff0c;求反正切&#xff0c;即角度。 采用用不断的旋转求出对应的正弦余弦值&…