简洁大气的企业网站,wordpress出售电子书,哈尔滨哪里做网站好,wordpress文章样式插件文章目录 1. 提出任务2. 完成任务2.1 创建鸿蒙项目2.2 准备图片资源2.3 编写首页代码2.4 启动应用 3. 实战小结 1. 提出任务
本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素#xff1a;一张图片增添视觉感#xff0c;两个分别用于账号与密码的文本输入框#… 文章目录 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 的基本操作还掌握了鸿蒙应用界面搭建的关键步骤为后续开发更复杂的鸿蒙应用奠定了坚实基础积累了宝贵的实践经验。
