鸿蒙学习笔记：用户登录界面

howard20052024-12-20 11:13

文章目录

1. 提出任务
1. 完成任务
- 2.1 创建鸿蒙项目
- 2.2 准备图片资源
- 2.3 编写首页代码
- 2.4 启动应用
1. 实战小结

1. 提出任务

本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素：一张图片增添视觉感，两个分别用于账号与密码的文本输入框，一个醒目的登录按钮助力用户登录操作，还有一个注册文本为新用户提供入口，以此构建简洁且实用的登录交互场景。

2. 完成任务

2.1 创建鸿蒙项目

创建项目- ArkUILogin

2.2 准备图片资源

将bear.png拷贝到media目录

2.3 编写首页代码

首页 - Index.ets

ts 复制代码

@Entry
@Component
struct Index {
  @State message: string = '用户登录';

  build() {
    Column() {
      // 图片
      Image($r('app.media.bear'))
        .width(180)
        .height(180)
        .margin({top: 80, bottom: 80})

      // 账号
      TextInput({placeholder: '请输入账号'})
        .maxLength(80)
        .type(InputType.Number)
        .margin({left: 20, right: 20, bottom: 10})

      // 密码
      TextInput({placeholder: '请输入密码'})
        .maxLength(80)
        .type(InputType.Password)
        .margin({left: 20, right: 20})

      // 登录
      Button(('登录'), {type: ButtonType.Capsule})
        .width(200)
        .fontSize(30)
        .fontWeight(FontWeight.Medium)
        .padding({top: 10, bottom: 10})
        .margin({top: 70, bottom: 20})

      // 注册
      Text('注册')
        .fontColor(Color.Blue)
        .fontSize(30)
        .fontWeight(FontWeight.Medium)
    }
    .width('100%')
  }
}

代码说明 ：这段代码是用ETS语言编写的，用于构建一个用户登录界面的UI组件，定义了一个名为Index的组件，其中包含状态message用于存储登录提示信息。build函数定义了界面布局，包括一个图片、账号和密码输入框、登录按钮以及注册文本链接。布局使用Column垂直排列，各控件通过链式调用来设置属性，如尺寸、边距和字体样式。登录按钮和注册文本具有不同的样式和间距设置。

2.4 启动应用

查看用户登录界面

3. 实战小结

本次实战通过 ArkUI 成功构建了一个用户登录界面。从创建鸿蒙项目"ArkUILogin"开始，精心准备图片资源并放置于指定目录。在编写首页代码时，合理布局一个图片、两个文本输入框、一个登录按钮与一个注册文本，利用组件属性精准设置样式与功能。最终成功启动应用，呈现出预期的登录界面。此过程不仅熟悉了 ArkUI 的基本操作，还掌握了鸿蒙应用界面搭建的关键步骤，为后续开发更复杂的鸿蒙应用奠定了坚实基础，积累了宝贵的实践经验。