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

1. 提出使命

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

2. 完成使命

2.1 创建鸿蒙项目

• 创建项目- ArkUILogin
  
  
  
  

2.2 准备图片资源

• 将bear.png拷贝到media目次
  
  
  
  

2.3 编写首页代码

• 首页 - Index.ets
  
  
  
  

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = '用户登录';
6.   build() {
7.     Column() {
8.       // 图片
9.       Image($r('app.media.bear'))
10.         .width(180)
11.         .height(180)
12.         .margin({top: 80, bottom: 80})
14.       // 账号
15.       TextInput({placeholder: '请输入账号'})
16.         .maxLength(80)
17.         .type(InputType.Number)
18.         .margin({left: 20, right: 20, bottom: 10})
20.       // 密码
21.       TextInput({placeholder: '请输入密码'})
22.         .maxLength(80)
23.         .type(InputType.Password)
24.         .margin({left: 20, right: 20})
26.       // 登录
27.       Button(('登录'), {type: ButtonType.Capsule})
28.         .width(200)
29.         .fontSize(30)
30.         .fontWeight(FontWeight.Medium)
31.         .padding({top: 10, bottom: 10})
32.         .margin({top: 70, bottom: 20})
34.       // 注册
35.       Text('注册')
36.         .fontColor(Color.Blue)
37.         .fontSize(30)
38.         .fontWeight(FontWeight.Medium)
39.     }
40.     .width('100%')
41.   }
42. }

复制代码

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

2.4 启动应用

• 检察用户登录界面
  
  
  
  

3. 实战小结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。