微网站主机注册免费,延边州网站建设,浙江省建设培训中心网,在线做视频网站根据app的操作流程可以知道#xff0c;当启动页启动后#xff0c;点击启动页中的页面就进入到了登录页。本讲就是针对于登录注册页的实现#xff0c;实现的界面参考下图。 这里根据这个素材的参考实现鸿蒙Next云捐助的登录页。
一、鸿蒙Next云捐助登录页的实现
在项目中继…根据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云捐助项目中登陆注册页面,后面持续完成首页、捐助页等相关的功能页面请持续关注。
