文章目录
- 1. 提出任务
- 2. 完成任务
- 2.1 创建鸿蒙项目
- 2.2 准备图片资源
- 2.3 编写首页代码
- 2.4 启动应用
- 3. 实战小结
1. 提出任务
- 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素：一张图片增添视觉感，两个分别用于账号与密码的文本输入框，一个醒目的登录按钮助力用户登录操作，还有一个注册文本为新用户提供入口，以此构建简洁且实用的登录交互场景。
2. 完成任务
2.1 创建鸿蒙项目
- 创建项目-
ArkUILogin
2.2 准备图片资源
- 将
bear.png拷贝到media目录
2.3 编写首页代码
- 首页 -
Index.ets
@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 的基本操作，还掌握了鸿蒙应用界面搭建的关键步骤，为后续开发更复杂的鸿蒙应用奠定了坚实基础，积累了宝贵的实践经验。
