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>
  • 运行:

在这里插入图片描述

目录
相关文章
|
2月前
|
缓存 自然语言处理 JavaScript
HarmonyOS实战—服务卡片初体验
最近看到很多博客网站上出现了HarmonyOS的征文活动,看到那些精美的奖品让我也安耐不住开了,当然奖品的诱惑当然是抵挡不住我对技术的狂热追求,对于开发者而言技术没有顶峰没有终点。那么今天给大家做一个卡片服务开发的经验分享,如果有什么地方说的不对的请各位开发者进行指正,如果有什么问题也可以发私信或者直接在帖子中留言,我也会及时回复大家。
|
2月前
|
XML Java 数据格式
HarmonyOS学习路之开发基础——快速入门(创建另一个页面)
在上一节中,我们用XML的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式,接下来我们使用代码的方式编写第二个页面。
|
2月前
|
XML Java 数据格式
HarmonyOS学习路之开发基础——快速入门(编写第一个页面)
在Java UI框架中,提供了两种编写布局的方式:在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别,为了熟悉两种方式,我们将通过XML的方式编写第一个页面,通过代码的方式编写第二个页面。
|
4月前
|
缓存 搜索推荐 Java
HarmonyOS实战—亮眼的原子化服务体验
HarmonyOS实战—亮眼的原子化服务体验
|
4月前
HarmonyOS ArkTS Ability内页面的跳转和数据传递
HarmonyOS ArkTS Ability 的数据传递包括有 Ability 内页面的跳转和数据传递、Ability 间的数据跳转和数据传递。本节主要讲解 Ability 内页面的跳转和数据传递。 打开 DevEco Studio,选择一个 Empty Ability 工程模板,创建一个名为 “ArkUIPagesRouter” 的工程为演示示例。
71 1
|
10月前
|
XML Java 数据格式
HarmonyOS实战—可编辑的卡片交互
HarmonyOS实战—可编辑的卡片交互
139 0
HarmonyOS实战—可编辑的卡片交互
|
10月前
|
JavaScript Java
HarmonyOS实战—欧洲杯还可以这么玩?(二)
HarmonyOS实战—欧洲杯还可以这么玩?(二)
77 0
|
10月前
|
JavaScript Java
HarmonyOS实战—欧洲杯还可以这么玩?(一)
HarmonyOS实战—欧洲杯还可以这么玩?(一)
104 0
HarmonyOS实战—欧洲杯还可以这么玩?(一)
|
10月前
|
JSON JavaScript Java
HarmonyOS实战—天气类卡片设计(二)
HarmonyOS实战—天气类卡片设计(二)
112 0
|
10月前
|
JSON Java API
HarmonyOS实战—天气类卡片设计(一)
HarmonyOS实战—天气类卡片设计(一)
152 0
HarmonyOS实战—天气类卡片设计(一)
热门文章
最新文章
相关产品
机器翻译
推荐文章
更多