HarmonyOS实战—实现注册登录和修改密码页面-阿里云开发者社区

开发者社区> 兮动人> 正文

HarmonyOS实战—实现注册登录和修改密码页面

简介: HarmonyOS实战—实现注册登录和修改密码页面
+关注继续查看

1. 注册登录页面

在这里插入图片描述

  • 设置的要求如下:

请添加图片描述

  • 新建项目:TextApplication
  • 上面的数值单位都是 px ,所以要转换成 vp 和 fp
  • 在 1920*1080 分辨率下,1px = 1/3vp
  • P401080*2340 的分辨率跟上面的 1920*1080 差不多,所以就可以用1:3 的关系来转换
  • 有关 px,vp,fp 三者的关系可以看看我之前写的博文:https://xdr630.blog.csdn.net/article/details/119299891
  • 快速格式化页面对齐:Ctrl + Alt + L

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#F2F2F2"
    ohos:orientation="vertical">

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:text="请输入手机号"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="100vp"
        />

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:text="请输入密码"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="10vp"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="right"
        ohos:right_margin="20vp"
        ohos:text="忘记密码了?"
        ohos:text_color="#979797"
        ohos:text_size="17fp"
        ohos:top_margin="13vp"/>

    <Button
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:background_element="#21a8fd"
        ohos:layout_alignment="horizontal_center"
        ohos:text="登录"
        ohos:text_alignment="center"
        ohos:text_color="#FEFEFE"
        ohos:text_size="24fp"
        ohos:top_margin="77vp"
        />

    <Button
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:background_element="#21a8fd"
        ohos:layout_alignment="horizontal_center"
        ohos:text="注册"
        ohos:text_alignment="center"
        ohos:text_color="#FEFEFE"
        ohos:text_size="24fp"
        ohos:top_margin="13vp"
        />

</DirectionalLayout>
  • 运行:

在这里插入图片描述

2. 修改密码页面

  • 设置的要求如下:

请添加图片描述- 右击 layout 创建第二个页面

在这里插入图片描述

second_ability

  • 把启动页面设置为第二个页面:

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#F2F2F2"
    ohos:orientation="vertical"
    >

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:text="请输入新密码"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="10vp"
        />

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:text="请确认新密码"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="10vp"
        />

    <Button
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:background_element="#21a8fd"
        ohos:layout_alignment="horizontal_center"
        ohos:text="完成"
        ohos:text_alignment="center"
        ohos:text_color="#FEFEFE"
        ohos:text_size="24vp"
        ohos:top_margin="12vp"
        />

</DirectionalLayout>
  • 运行:

在这里插入图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Java 从入坑到放弃】No 3. 变量与数据类型
【Java 从入坑到放弃】No 3. 变量与数据类型
7 0
“冬季实战营第一期:从零到一上手玩转云服务器”场景体验实验小结
冬季实战营第一期,多种场景体验,免费实验资源,动手实战,在实际操作中学习。
11 0
Gitee + Typora,搭建你的免费高速图床
Gitee + Typora,搭建你的免费高速图床
8 0
最好的人工智能图片编辑工具,让你的图片更有美感。
照片修复、去除水印、背景抠图等图片在线处理工具
10 0
数字化转型:服务化设计原则(上)
数字化转型:服务化设计原则(上)
4 0
深入死磕 Java IO 流
深入死磕 Java IO 流
8 0
学习报告:冬季实战营第一期
在冬季实战营第一期:从零到一上手玩转云服务器的学习报告
9 0
微服务架构谈(4):领域事件-解耦微服务的关键
微服务架构谈(4):领域事件-解耦微服务的关键
8 0
+关注
兮动人
世间味趣亦如此,万物且去轮浮生。
133
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载