鴻蒙注冊登錄頁面的實現步驟
注冊登錄頁面
設置的要求如下：
上面的數值單位都是 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文章
2636瀏覽量
66465 -
HarmonyOS
+關注
關注
79文章
1980瀏覽量
30290
原文標題：如何實現一個鴻蒙注冊登錄頁面？
文章出處：【微信號：gh_834c4b3d87fe，微信公眾號：OpenHarmony技術社區】歡迎添加關注！文章轉載請注明出處。
發布評論請先 登錄
相關推薦
鴻蒙原生頁面高性能解決方案上線OpenHarmony社區 助力打造高性能原生應用
HarmonyOS Web頁面加載的原理和優化方法
模擬登錄頁，華為賬號一鍵登錄
Linux內核中的頁面分配機制
鴻蒙開發：【頁面棧及任務鏈】
鴻蒙Ability Kit（程序框架服務）【UIAbility內和UIAbility間頁面的跳轉】
鴻蒙開發接口UI界面：【@ohos.router (頁面路由)】
純血鴻蒙開發教程-運行時動態加載頁面提升性能
HarmonyOS開發案例：【UIAbility內和UIAbility間頁面的跳轉】
工商網監
評論