鸿蒙项目云捐助第四讲鸿蒙App应用的登陆注册页实现

根据app的操作流程可以知道，当启动页启动后，点击启动页中的页面就进入到了登录页。本讲就是针对于登录注册页的实现，实现的界面参考下图。

这里根据这个素材的参考实现鸿蒙Next云捐助的登录页。

一、鸿蒙Next云捐助登录页的实现

在项目中继续创建login.ets文件，由于login.ets的登陆页面也是显示到app的页面s，这里也要使用@Entry注解。这样建立login.ets的初始结构如下。

这里在build()方法中使用弹性盒子组件Flex，在Flex组件中分析页面的布局方法，这里使用的是竖向的布局，在Flex组件中通过direction的方向属性来决定是否是竖向还是横向，具体设置方法可以这样定义。

Flex({direction:FlexDirection.Column})
这里Column表示的是竖向，
Row表示的是横向。

根据前面登录页的模板，需要人头的图像和文字竖向排列，也就决定了弹性盒子Flex使用Column竖向排列，在Flex中使用Image的图像组件和Text文字组件。

鸿蒙Next规定所有的文字信息都存放在resources的资源文件夹下，zh-CN的文件夹中可以存放中文的信息，如下图所示。

图中在zh_CN文件夹中，有一个string.json文件，在string.json中定义一个name和value的键值，name定义字符串调用的名字，value表示字符串对应的中文意义。

有了文字的定义后，可以在login.ets的build()方法中定义图像和文字的布局排列方式，如下图所示。

这里在Flex的弹性盒子中使用Image组件和Text组件，两个组件都使用$r进行资源的指定。图片的资源调用app.media.user，文字内容的资源调用app.string.myapp_username。

这里引入的Image图像组件需要定义width的宽度和height的高度，对于图像组件的圆角属性可以使用borderRadius属性方法，参数中指明borderRadius的圆角数字就可以实现。这里引入的Text文字组件需要定义字号fontSize的属性方法，在参数中定义一个字体大小数字就可以。Text文字组件也可以使用fontColor定义字体颜色，这个属性方法中通过“Color.颜色名”指示字体的颜色。Text文字组件的居中使用TextAlign.Center属性方法来实现。

对于在弹性盒子中的Image图像组件和Text文字组件可以实现整体居中，这里通过两个属性，alignItem实现垂直轴的居中，justifyContent实现的是水平轴的居中。具体布局代码如下图所示。

代码中对于水平居中使用justifyContent，对于垂直居中使用alignItems,具体设置居中一般都使用下面的固定属性。

 //设置水平居中justifyContent:FlexAlign.Center
//设置垂直居中
alignItems:ItemAlign.Center

在圆角图片和文字的下面是两个输入框，要求用户输入用户名和密码。这里为了防止结构上的错乱，可以把图片组件Image 和文字组件Text收缩一下，如下图所示。

这里布局中又引入一个Flex的弹性盒子，在build()方法中只有一个Flex()的竖向弹性盒子，在鸿蒙Next中，build()方法中只有一个孩子元素。最外层的Flex里面又加入一个Flex的弹性盒子，里面的弹性盒子包含有Image图片组件和Text文字组件，把里面的Flex弹性盒子收缩，这样实现后面的输入框元素不会造成布局混乱。

注意，这里的输入框中是由图片和文字组成的，首先准备两个图片，一个是用户的图片标志，一个是密码的图片标志，通过百度图库中找到的图片标志放在media的文件夹中，如下图所示。

这里先把收集到的图标user_icon的用户图标及key_icon的密码图标放在media的目录下，然后准备文字方面的资源，在resources目录下的zh_CN目录中的string.json文件中定义字符串数据。如下图所示。

这里首先定义一个邮箱的用户名资源，然后在login.ets的登录页面中放置登录框，布局中的代码如下图所示。

这里Flex的弹性盒子组件中包括输入框的图标和输入框的组件，图标采用Image组件，使用width定义Image组件的宽度，输入框和图片组件采用横向排列，Flex弹性盒子声明其方向direction设置为FlexDirection.Row横向布局。对于Flex弹性盒子中的TextInput输入框除了引入placeholder的预置其内容提示外，还定义其圆角属性borderRadius和背景颜色backgroundColor。这里的bordreRadius只定义左上角和左下角为0,这样出现的圆角并不是整个输入框都会圆角，而是某个边出现圆角。backgroundColor的背景颜色为Color.White白色。

下面的密码输入框和用户输入框的布局设置是一样的，不同的是TextField组件多加一个type的属性指定，其type的名称指定为InputType.Password的密码。代码布局如下图所示。

完成密码输入框设置后，最后是一个Button按钮的配置。在Button按钮上也需要设置“立即登录”的按钮,这里设置的文字资源放在resources目录下zh_CN中文文件夹的string.json文件中标明。如下图所示。

在string.json中设置了“立即登录”的文字资源后，就可以在login.ets的最后添加这个Button元素，代码如下图所示。

这里的Button按钮定义了width宽度和height高度，也使用fontSize进行字号的限定， backgroundColor指明了背景颜色，整个按钮也需要margin定义与上面元素的位置，这里引入top属性指明外边距上面的距离。

设置按钮后，最后添加“去注册”功能及“忘记密码”功能的延展。首先从resources目录下zh_CN中文文件夹的string.json文件中标明文字资源。

文字资源定义后，可以从login.ets的build方法中添加“去注册”和“忘记密码”的文本引用，代码如下图所示。

这里的Flex使用了FlexDirection.Row的横向布局，需要注意的是，这里使用了FlexAlign.SpaceBetween进行两个元素的两端对齐功能，这样两个元素的分配是左边一个，右边一个，SpaceBetween的两端对齐功能也是很重要的。

这样，登录页面就实现了，实现后的页面预览效果如下。

登录页面完成后,复制此页面,在项目的pages页面中粘贴成register.ets的注册页,并改变Register.ets代码中struct后面的名字为Register。代码如下图所示。

这里完成了鸿蒙Next云捐助项目中登陆注册页面,后面持续完成首页、捐助页等相关的功能页面，请持续关注。