返回发烧友论坛
发 帖  

[文章]#HarmonyOS征文# HarmonyOS实战—实现注册登录和修改密码页面

兮动人
2021-08-13 17:23:11
阅读量0
鸿蒙OS鸿蒙系统HarmonyOS
0
0
1. 注册登录页面
  • 设置的要求如下：
  • 新建项目：TextApplication
  • 上面的数值单位都是 px ，所以要转换成 vp 和 fp
  • 在 1920*1080 分辨率下，1px = 1/3vp
  • P40：1080*2340 的分辨率跟上面的 1920*1080 差不多，所以就可以用1：3 的关系来转换
  • 有关 px,vp,fp 三者的关系可以看看我之前写的博文：https://bbs.elecfans.com/jishu_2143943_1_1.html
  • 快速格式化页面对齐：Ctrl + Alt + L
ability_main
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:background_element="#F2F2F2"
  7.     ohos:orientation="vertical">

  9.     <Text
  10.         ohos:height="50vp"
  11.         ohos:width="319vp"
  12.         ohos:background_element="#FFFFFF"
  13.         ohos:layout_alignment="horizontal_center"
  14.         ohos:text="请输入手机号"
  15.         ohos:text_alignment="center"
  16.         ohos:text_color="#999999"
  17.         ohos:text_size="17fp"
  18.         ohos:top_margin="100vp"
  19.         />

  21.     <Text
  22.         ohos:height="50vp"
  23.         ohos:width="319vp"
  24.         ohos:background_element="#FFFFFF"
  25.         ohos:layout_alignment="horizontal_center"
  26.         ohos:text="请输入密码"
  27.         ohos:text_alignment="center"
  28.         ohos:text_color="#999999"
  29.         ohos:text_size="17fp"
  30.         ohos:top_margin="10vp"
  31.         />

  33.     <Text
  34.         ohos:height="match_content"
  35.         ohos:width="match_content"
  36.         ohos:layout_alignment="right"
  37.         ohos:right_margin="20vp"
  38.         ohos:text="忘记密码了?"
  39.         ohos:text_color="#979797"
  40.         ohos:text_size="17fp"
  41.         ohos:top_margin="13vp"/>

  43.     <Button
  44.         ohos:height="47vp"
  45.         ohos:width="319vp"
  46.         ohos:background_element="#21a8fd"
  47.         ohos:layout_alignment="horizontal_center"
  48.         ohos:text="登录"
  49.         ohos:text_alignment="center"
  50.         ohos:text_color="#FEFEFE"
  51.         ohos:text_size="24fp"
  52.         ohos:top_margin="77vp"
  53.         />

  55.     <Button
  56.         ohos:height="47vp"
  57.         ohos:width="319vp"
  58.         ohos:background_element="#21a8fd"
  59.         ohos:layout_alignment="horizontal_center"
  60.         ohos:text="注册"
  61.         ohos:text_alignment="center"
  62.         ohos:text_color="#FEFEFE"
  63.         ohos:text_size="24fp"
  64.         ohos:top_margin="13vp"
  65.         />

  67. </DirectionalLayout>
复制代码

  • 运行：

2. 修改密码页面
  • 设置的要求如下：
  • 右击 layout 创建第二个页面

second_ability
  • 把启动页面设置为第二个页面：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:background_element="#F2F2F2"
  7.     ohos:orientation="vertical"
  8.     >

  10.     <Text
  11.         ohos:height="50vp"
  12.         ohos:width="319vp"
  13.         ohos:background_element="#FFFFFF"
  14.         ohos:layout_alignment="horizontal_center"
  15.         ohos:text="请输入新密码"
  16.         ohos:text_alignment="center"
  17.         ohos:text_color="#999999"
  18.         ohos:text_size="17fp"
  19.         ohos:top_margin="10vp"
  20.         />

  22.     <Text
  23.         ohos:height="50vp"
  24.         ohos:width="319vp"
  25.         ohos:background_element="#FFFFFF"
  26.         ohos:layout_alignment="horizontal_center"
  27.         ohos:text="请确认新密码"
  28.         ohos:text_alignment="center"
  29.         ohos:text_color="#999999"
  30.         ohos:text_size="17fp"
  31.         ohos:top_margin="10vp"
  32.         />

  34.     <Button
  35.         ohos:height="47vp"
  36.         ohos:width="319vp"
  37.         ohos:background_element="#21a8fd"
  38.         ohos:layout_alignment="horizontal_center"
  39.         ohos:text="完成"
  40.         ohos:text_alignment="center"
  41.         ohos:text_color="#FEFEFE"
  42.         ohos:text_size="24vp"
  43.         ohos:top_margin="12vp"
  44.         />

  46. </DirectionalLayout>
复制代码


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友