鸿蒙注册登录页面的实现步骤
注册登录页面
设置的要求如下：
上面的数值单位都是 px ，所以要转换成 vp 和 fp
在 1920*1080 分辨率下，1px=1/3vp
P40：1080*2340 的分辨率跟上面的 1920*1080 差不多，所以就可以用1：3 的关系来转换
有关 px，vp，fp 三者的关系可以看看我之前写的博文：https://harmonyos.51cto.com/posts/7507
快速格式化页面对齐：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》
运行：
修改密码页面
设置的要求如下：
右击 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》
责任编辑：haq
-
鸿蒙系统
+关注
关注
183文章
2634浏览量
66145 -
HarmonyOS
+关注
关注
79文章
1966浏览量
29958
原文标题：如何实现一个鸿蒙注册登录页面？
文章出处：【微信号：gh_834c4b3d87fe，微信公众号：OpenHarmony技术社区】欢迎添加关注！文章转载请注明出处。
发布评论请先 登录
相关推荐
模拟登录页，华为账号一键登录
Linux内核中的页面分配机制
鸿蒙开发：【页面栈及任务链】
鸿蒙Ability Kit（程序框架服务）【UIAbility内和UIAbility间页面的跳转】
鸿蒙开发接口UI界面：【@ohos.router (页面路由)】
纯血鸿蒙开发教程-运行时动态加载页面提升性能
HarmonyOS开发案例：【UIAbility内和UIAbility间页面的跳转】
工商网监
评论