鸿蒙 ArkTS 登录页面开发完整教程

鸿蒙 ArkTS 登录页面开发完整教程

一、项目实现效果

1. 页面顶部圆形头像展示
2. 用户名输入框：输入文字后右侧出现「×」清除按钮，点击一键清空输入内容
3. 密码输入框：密码圆点隐藏保护 + 右侧清除按钮
4. 登录按钮：校验账号密码均为root，弹窗区分登录成功 / 失败
5. 注册按钮：白底蓝色边框、蓝色文字样式
6. 统一浅灰色圆角输入框，页面布局整洁统一

二、前置准备工作

1.图片资源准备 将头像图片命名为one，格式为 png/jpg，放入项目路径： entry/src/main/resources/base/media 代码中$r('app.media.one')可读取该图片实现圆形头像。

2.新建页面文件 打开Index.ets，清空原有全部代码，粘贴下方完整代码

1. 完整可直接复制代码

@Entry
@Component
struct Index {
build() {
Column({ space: 30 }) {
Image($r('app.media.one'))
.width(100)
.height(100)
.borderRadius(50)


Text("账号登录")
.fontSize(26)
.fontWeight(FontWeight.Bold)


TextInput({ placeholder: "用户名" })
.width('100%')
.height(50)
.backgroundColor(0xf8f8f8)
.borderRadius(8)
.padding({ left: 15 })

TextInput({ placeholder: "密码" })
.width('100%')
.height(50)
.backgroundColor(0xf8f8f8)
.borderRadius(8)
.padding({ left: 15 })

Row({ space: 40 }) {
Button("登录")
.width(120)
.height(50)
.backgroundColor(0x007Dff)
.fontColor(Color.White)
.fontSize(18)

Button("注册")
.width(120)
.height(50)
.backgroundColor(Color.White)
.fontColor(0x007Dff)
.border({ width: 2, color: 0x007Dff })
.fontSize(18)
}
.width('100%')
.justifyContent(FlexAlign.Start)
}
.width('100%')
.height('100%')
.padding(30)
}
}

四、预览

五、常见报错与解决办法

1. InputType 爆红 解决：文件最顶部添加导入代码 import InputType from '@ohos.ui.InputType';
2. 图片资源报错找不到 解决：头像图片放入 media 文件夹，文件名和代码内one完全一致，区分大小写。
3. 点击 × 输入框内容不消失 解决：变量必须添加@State装饰器，不能直接定义username:string = ""。
4. 点击登录无弹窗 解决：检查代码无语法错误，运行模拟器后点击按钮自动唤起系统弹窗。