本節任務

完成用戶登陸UI，點擊登陸按鈕跳轉到應用主頁

界面原型：

登陸頁面：

登陸成功頁面：

涉及知識點：

• 線性布局
• Image組件
• 輸入框
• 復選框
• 分割線
• 按鈕
• 路由跳轉
• 背景色、內容對齊

1 新建項目

錄入項目信息：

2 logo部分

在index.ets下面編碼，完成登陸頁面，首先刪除原有樣例代碼，然后，使用column布局，添加logo：

@Entry
@Component
struct Index {build() {Column(){Image($r('app.media.gwglogo')).width(180).height(180).margin(10)      }.width('100%').height('100%')}
}

預覽效果：

[!IMPORTANT]

圖片需要放到media目錄下：

\src\main\resources\base\media\gwglogo.png

3 登陸部分

仍然在column中使用上下布局，添加用戶名輸入框、密碼框、忘記密碼、登陸按鈕：

TextInput({placeholder:'用戶名/手機/郵箱'}).backgroundColor(Color.White).showUnderline(true).width('95%')TextInput({placeholder:'密碼'})//密碼框輸入模式不支持下劃線.type(InputType.Password).backgroundColor(Color.White).width('95%')
Text('忘記密碼').width('95%').fontSize(12).fontColor(Color.Gray).margin(10).textAlign(TextAlign.End)
Button('登陸').width('80%').backgroundColor('#ccc')

4 注冊及用戶協議

使用Row布局：

      Row(){Text('立即注冊').fontSize(14)Text('短信登陸').fontSize(14)}.width('90%').justifyContent(FlexAlign.SpaceBetween).margin(10)Row(){Checkbox()Text('我已閱讀并同意《用戶協議》').fontSize(12).fontColor(Color.Red)}

預覽效果：

5 其他方式登陸

添加分割線、其他方式登陸、登陸入口logo：

      Divider().margin(10)Text('其他方式登陸').fontSize(12)Row({space:8}){Image($r('app.media.letterA')).width(32).height(32).borderRadius(16)Image($r('app.media.letterB1')).width(32).height(32).borderRadius(16)Image($r('app.media.letterC1')).width(32).height(32).borderRadius(16)}.width('95%').margin(10).justifyContent(FlexAlign.Center)

預覽效果：

6 登陸跳轉

1）新建主頁

命名為MainPage：

頁面預覽：

2）路由跳轉

在登陸按鈕上綁定事件，點擊后通過路由進行跳轉：

      Button('登陸').width('80%').backgroundColor('#ccc').onClick(()=>{router.pushUrl({url:'pages/MainPage'})})

[!NOTE]

路由組件可以自動在代碼頭部導入：

import { router } from '@kit.ArkUI'

頁面路由鏈接從以下文件中獲取：

src/main/resources/base/profile/main_pages.json

{"src": ["pages/Index","pages/MainPage"]
}

預覽效果，首先點擊登陸按鈕：

跳轉后頁面，點擊預覽器工具欄中的返回鍵可以返回登陸頁面：

代碼參考：

https://gitee.com/snowyvalley/harmony-app-dev-basic-course.git