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

server/2024/12/25 13:49:21/

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

在一般的应用app中都会有一个“我的”页面,在“我的”页面中可以完成某些设置,也可以完成某些附加功能,如“修改密码”等相关功能。这里的鸿蒙云捐助也有一个“我的”功能页面。这里对“我的”功能页面进行布局设置。

这里的“我的”页面分为上下两部分。

一、“我的”页面大致规划

这里参考公益类捐助的上半部分,如下图所示。

一般在我的页面的下半部分会展示某些功能。这里大多采用豆腐块布局。如下图所示。

在“我的”页面的最上面还可以加入用户名的显示,如下图所示。

这里由于是捐助项目,可以在用户名的下面设置绑定的一张银行卡或者爱心卡。如下图所示。

通过分析大致的布局分为四部分,这里分别介绍。

一、登录用户显示部分

这里效仿的模板如下图所示。

完成“我的”组件需要在项目中component的文件夹下建立Mine.ets文件,如下图所示。

这里先期进行布局时保证Mine我的组件进行可视化,这里使用@Entry来修饰组件,同时还需要@Component对组件进行声明,鸿蒙组件的架构如下图所示。

这里使用export default导出组件,保证组件在后面被其他父组件调用。

由于“我的”组件有4个元素都是上下级排列,这里使用弹性盒子Flex,并使用属性direction方向指定为FlexDirection.Column指明方向是竖向排列。代码如下图所示。

紧接着在这个竖向的弹性盒子中布局用户显示的第一个部分,代码如下。

代码使用弹性盒子Flex定义第一个部分,这里的弹性盒子使用direction方向设置为FlexDirection.Column进行竖向布局,使用justifyContent水平设置为FlexAlign.Center进行居中,使用alignItems竖直方向为FlexAlign.Center进行居中。最关键的是主个整体用户显示部分的弹性盒子使用渐变色指令linearGradient的线性渐变,这里从0xff0000的红色渐变到0xee9900的粉色,并且透明度从0.0渐变到1.0。

在弹性盒子中第一个元素显示的是头像,把头像放在Flex弹性盒子中,头像使用borderRadius定义圆角,width宽和height高各为100,头像外面的Flex弹性盒子使用backgroundColor设置背景色为Color.White的白色,width宽和height高和头像的width宽和高一致都为100,头像Image组件外面的弹性盒子也做了borderRadius的圆角处理。

在Flex包含头像弹性盒子的下面是Text文字组件,Text文字组件显示“注册用户名:田边人”的信息,这个信息使用fontSize字体大小为25,指定信息的fontColor字体颜色为Color.White白色。Text文字组件的外边距margin设定为bottom下边距为10。

第一部分的最下面也是Text文字组件,显示“一般用户”,也有可能显示“管理员”,这在程序后面进行控制。这里设置“一般用户”的Text文本组件的背景色backgroundColor为Color.White的白色背景,高度width设为100,height高度设为30,“一般用户”的Text文本组件也设置成了圆角状态。

这样就完成了第一部分用户信息部分的展示,最终效果如下图所示。

在“我的”页面的第二个部分,这里布局一个银行卡。

二、“我的”页面银行卡的布局

这里布局银行卡参照的模板如下图所示。

完成布局需要准备的是银联的图片,龙形背景,银行卡磁芯,还有中国建设银行的标志。如下图所示的素材准备。

通过素材的拼接,最终银行卡的布局代码如下图所示。

代码首先把整个银行卡当成一个弹性盒子Flex,这里设置其direction的方向为FlexDirection.Column的竖向排列,这个整体银行卡的弹出盒子具备backgroundImage的背景图片,这里使用$r("app.media.card_bk")龙型图案做为背景图片,然后设置backgroundImageSize背景图片的尺寸是ImageSize.Cover覆盖,在边框上进行borderRadius的圆角处理,设置其宽度width为90%,高度为200,这样银行卡的底纹外框就准备好了。

在银行卡的底纹外框中首先有一个弹性盒子Flex,其方向direction定义为FlexDirection.Row横向排列,这里设置的是建行图标和建行文字的横向排列,左侧是Image图片组件,这个Image图片组件使用建行的图标,定义宽width和高height,右边是建行中文和项文竖向排列的弹性盒子Flex,这个Flex定义方向是FlexDiretion.Column进行竖向排列,其中里面包括中文Text文字组件的“中国建设银行”和英文Text文字组件“China Construction Bank”。

在银行卡的底纹外框第二部分是银行卡的磁芯,这时就是一个图片,设置其width宽度和height高度,并设置left的外边距。

在银行卡的底纹外框第三部分是银行卡的卡号,这里直接使用Text文本组件,将卡号做为文本组件的内容,设置fontSize的文字大小为25。

在银行卡的底纹外框最后一部分是显示银联的标志,这个标志需要放在右边,这里通过弹性盒子Flex设置direction方向为FlexDirection.Row的横向,再通过justifyContent水平居中设置为FlexAlign.SpaceBetween的两端对齐,在弹性盒子使用两个元素,空文本Text组件和Image图片组件,由于两端对齐,空文本Text组件在左,Image图片组件在右,Image图片组件设置宽度width为60和高度height为30。

设置好银行卡布局显示效果如下图所示。

这样就实现的云捐助“我的”页面的上半部分,后续会带来云捐助“我的”页面的下半部分布局,欢迎关注。


http://www.ppmy.cn/server/153050.html

相关文章

第二节:让电机转起来【51单片机-L298N-步进电机教程】

摘要:本节介绍用简单的方式,让步进电机转起来。其目的之一是对电机转动有直观的感受,二是熟悉整个开发流程 本系列教程必要的51单片机基础包括IO口操作、中断、定时器三个部分,可先行学习 一、软件清单 需要用到的软件有keil5编译…

opencv sdk for java中提示无stiching模块接口的问题

1、问题介绍 安卓项目中有新的需求,在 jni 中增加 stiching_detail.cpp 中全景拼接的实现。 但是在编译时,出现大量报错,如下截图所示 实际上,其他opencv的接口函数 例如 core dnn等都能正常使用,直觉上初步怀疑 ope…

原点安全再次入选信通院 2024 大数据“星河”案例

近日,中国信息通信研究院和中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)共同组织开展的 2024 大数据“星河(Galaxy)”案例征集活动结果正式公布。由工银瑞信基金管理有限公司、北京原点数安科技有限公司联…

SQL Server 数据库更新调用外部HTTP请求

sql server developer 当插入数据和update数据的时候能否调用http请求 https://learn.microsoft.com/zh-cn/sql/relational-databases/clr-integration/database-objects/getting-started-with-clr-integration?viewsql-server-ver15&tabscs 步骤 2: 创建 CLR 程序集 set …

简单了解函数递归

函数递归 一 了解函数递归二 深入理解函数递归的思想三 函数递归的优缺点 一 了解函数递归 首先&#xff0c;我们通过一个简单的代码来理解函数递归。 #include<stdio.h> int Func() {return Func(n1); } int main() {int n 5;Func(n);return 0; }这个就是函数递归&am…

畅捷通T+13管理员密码任意重置漏洞

复现版本 畅捷通13 漏洞复现 POST /tplus/ajaxpro/RecoverPassword,App_Web_recoverpassword.aspx.cdcab7d2.ashx?methodSetNewPwd HTTP/1.1 Host: 192.168.1.8:8080 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0 Accept…

Mysql大数据量表分页查询性能优化

一、模拟场景 1、产品表t_product,数据量500万+ 2、未做任何优化前,cout查询时间大约4秒;LIMIT offset, count 时,offset 值较大时查询时间越久。 count查询 SELECT COUNT(*) AS total FROM t_product WHERE deleted = 0 AND tenant_id = 1 分页查询 SELECT * FROM t_…

每天40分玩转Django:Django表单集

Django表单集 一、今日学习内容概述 学习模块重要程度主要内容表单集基础⭐⭐⭐⭐⭐表单集定义、基本用法内联表单集⭐⭐⭐⭐⭐内联表单、关联数据表单集验证⭐⭐⭐⭐自定义验证、错误处理动态表单集⭐⭐⭐⭐动态添加删除表单 二、基本模型定义 # models.py from django.db…