注冊登錄頁面

設置的要求如下：

新建項目：TextApplication

上面的數值單位都是 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