鸿蒙登录页面悦目的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【Harmo ...

鸿蒙登录页面悦目的样式设计-HarmonyOS应用开发实战与ArkTS代码解析

万物智联，打造无缝智能生态

在科技不停迭代更新的本日，每一次技能的飞跃都是对未来的深刻探索。华为，这个始终站在科技前沿的企业，再次以HarmonyOS 5.0（Next）这一操纵系统的新篇章，向我们展示了科技怎样以前所未有的方式改变我们的生存。这不但仅是一次操纵系统的升级，更是一次对未来智能生存大概性的深度挖掘和呈现。

HarmonyOS 5.0（Next）以“未来美学”为焦点理念，将科技与艺术完善融合。系统界面接纳了全新的设计风格，通过风雅的动画效果和丰富的色彩搭配，为用户带来一场视觉盛宴。同时，系统还支持个性化定制，用户可以根据本身的喜好选择主题、壁纸、图标等元素，打造属于本身的专属界面。

HarmonyOS 5.0（Next）进一步强化了分布式软总线技能，实现了智能设备间的无缝连接和协同工作。无论是智能家居、智能穿戴设备，还是智能办公设备，都能轻松接入鸿蒙生态，实现信息共享和智能联动。用户只需轻轻一触，即可享受智能家居带来的便捷和舒服，让智能生存触手可及。
本页面实战效果预览图

一.HarmonyOS应用开发

1.1HarmonyOS 详解

HarmonyOS（鸿蒙操纵系统）是华为公司推出的一种分布式操纵系统。它被设计为一种全场景、全连接的操纵系统，旨在实如今各种设备之间的无缝协同和共享，包罗智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目的是构建一个同一的、开放的、全场景的操纵系统生态系统。
以下是一些 HarmonyOS 的关键特点和设计理念：

• 全场景适配： HarmonyOS 被设计为一个全场景操纵系统，可以在各种终端设备上运行，无论是小型传感器设备还是大型的显示屏幕设备。
  
• 分布式架构： HarmonyOS 引入了分布式架构的概念，使得多个设备能够协同工作，共同完成使命。这使得设备之间的通信更加灵活，用户体验更加同等。
  
• 一次开发，多端摆设： HarmonyOS 提倡一次开发，多端摆设的理念，开发者可以使用相同的代码和开发工具，将应用程序轻松摆设到差别范例的设备上。
  
• 微内核架构： HarmonyOS 使用微内核架构，将操纵系统内核划分为一个小型的内核和一系列服务。这有助于进步系统的可靠性和安全性，并简化系统的维护和升级。
  
• 面向未来的技能： HarmonyOS 支持面向未来的技能，包罗分布式数据管理、分布式安全、分布式图形等。这使得系统更具创新性，顺应未来设备和应用的发展。
  
• 开放源代码： HarmonyOS 是一个开源操纵系统，这意味着开发者可以访问其源代码，并根据需要进行修改和定制。这有助于推动开发者社区的参与和生态系统的发展。
  

总体而言，HarmonyOS 是为了顺应未来环球数字化生存的需求而设计的一种操纵系统。它的目的是提供更加同一、开放、灵活的操纵系统平台，使得开发者能够更轻松地创建跨设备的应用程序，并为用户提供同等的、流畅的使用体验。
1.2 ArkTS详解

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）根本语法风格的底子上，对TS的动态范例特性施加更严酷的约束，引入静态范例。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。
自然简洁语法
ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，誊写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。
轻量化并发机制
ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程。在运行时实例内存隔离的底子上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技能手段，优化了并发运行实例的启动性能和内存开销。
二.HarmonyOS应用开发实战—登录页面【ArkTS】

2.1 ArkTS页面源码

1. import router from '@ohos.router'
2. import prompt from '@ohos.prompt'
3. import promptAction from '@ohos.promptAction'
4. // import {Login, AuthMode} from "@ohos/agconnect-auth-component";
5. @Entry
6. @Component
7. struct LoginPage {
8.   @State password: string = ''
9.   @State username: string = ''
10.   @State phone: string = ''
11.   build() {
12.     Column() {
13.       Text("登陆")
14.         .fontSize(50)
15.         .fontWeight(FontWeight.Bold).margin({
16.         bottom: 60
17.       })
18.       Row() {
19.         Text("用户名")
20.           .fontSize(18)
21.           .fontWeight(FontWeight.Bold)
22.       }.width("100%")
24.       Row() {
25.         Image($r("app.media.name")).width(30)
26.         TextInput({
27.           placeholder: "请输入用户名"
28.         }).width(300).onChange((val: string) => {
29.           this.username = val
30.         })
31.       }.margin({
32.         bottom: 8,
33.         top: 8
34.       }).width("100%")
36.       Divider().strokeWidth(4)
38.       Row() {
39.         Text("密码")
40.           .fontSize(18)
41.           .fontWeight(FontWeight.Bold).margin({
42.           bottom: 8,
43.           top: 8
44.         })
45.       }.width("100%")
47.       Row() {
48.         Image($r("app.media.password")).width(30)
50.         TextInput({
51.           placeholder: "请输入密码"
52.         }).width(300).onChange((val: string) => {
53.           this.password = val
54.         }).type(InputType.Password)
55.       }.width("100%")
57.       Divider().strokeWidth(4)
58.       Row() {
59.         Blank()
60.         Text("忘记密码？")
61.           .fontSize(18)
62.           .fontWeight(FontWeight.Bold)
63.       }.width("100%")
65.       Button("登陆").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {
66.         if (this.username == "admin" && this.password == "admin") {
67.           router.replaceUrl({
68.             url: "page/homepage",
69.             params: {
70.               name: this.username
71.             }
72.           })
73.         }
74.         else {
75.           promptAction.showToast({
76.             message:"密码或用户名错误，请重新输入"
77.           })
78.         }
79.       }).margin({
80.         top: 30,
81.       })
83.       Row() {
84.         Button('第三方登陆')
85.           .width("140vp")
86.           .height("80vp")
87.           .fontSize(20)
88.           .margin({
89.             bottom: 40,
90.             top: 60,
91.             right: 20
92.           })
93.         Button('立即注册')
94.           .width("140vp")
95.           .height("80vp")
96.           .fontSize(20)
97.           .margin({
98.             bottom: 40,
99.             top: 60,
100.           })
101.       }
102.       Image($r("app.media.logo")).width(80)
103.     }
104.     .width('100%')
105.     .height('100%')
106.     .justifyContent(FlexAlign.Center)
107.     .alignItems(HorizontalAlign.Center)
108.     .padding({
109.       left: 20,
110.       right: 20
111.     })
112.   }
113. }

复制代码

2.2 代码解析

这段代码是使用 HarmonyOS的 UI 组件进行页面布局和交互的代码。以下是对代码的分析：

• 导入模块：
  
  1. import router from '@ohos.router'
  2. import prompt from '@ohos.prompt'
  3. import promptAction from '@ohos.promptAction'

  复制代码
  这里导入了一些 HarmonyOS 提供的模块，包罗用于导航的 router 模块和用于提示的 prompt 和 promptAction 模块。
  
• 页面定义：
  
  1. @Entry
  2. @Component
  3. struct LoginPage {
  4.   // ...
  5. }

  复制代码
  使用了 HarmonyOS 的注解（@Entry 和 @Component）来定义一个名为 LoginPage 的页面组件。
  
• 状态管理：
  
  1. @State password: string = ''
  2. @State username: string = ''
  3. @State phone: string = ''

  复制代码
  使用 @State 注解定义了三个状态变量 password、username 和 phone。
  
• UI 布局：
  
  1. build() {
  2.   Column() {
  3.     // ... UI 布局代码
  4.   }
  5.   .width('100%')
  6.   .height('100%')
  7.   .justifyContent(FlexAlign.Center)
  8.   .alignItems(HorizontalAlign.Center)
  9.   .padding({
  10.     left: 20,
  11.     right: 20
  12.   })
  13. }

  复制代码
  在 build 方法中，使用 HarmonyOS 提供的 UI 组件进行页面布局，包罗 Column、Row、Text、Image、TextInput、Divider 等。通过这些组件的嵌套和设置属性，构建了登录页面的 UI 结构。
  
• 事件处理：
  
  1. Button("登陆").onClick(() => {
  2.   // ... 按钮点击事件处理代码
  3. })

  复制代码
  当点击登录按钮时，会执行相应的事件处理代码。在这里，根据输入的用户名和暗码进行简朴的验证，如果是 admin/admin 则导航到首页，否则显示错误提示。
  
• 页面元素设置：
  设置了页面中的笔墨大小、字体加粗、边距、背景颜色等属性，以及按钮的点击事件处理。
  

2.3 心得

这段代码展示了 HarmonyOS 应用程序开发的一些关键概念和技能。以下是一些心得：

• 声明式 UI 布局： HarmonyOS 使用声明式 UI 的方式，通过组合差别的 UI 组件和设置属性来构建用户界面。这种方式使得 UI 布局清晰易读，更容易明白和维护。
  
• 状态管理： 使用 @State 注解来定义状态变量，这些变量用于跟踪用户输入的数据。状态管理是构建交互式应用程序的关键，它允许界面与数据同步更新。
  
• 事件处理： 通过为按钮等组件添加事件处理函数，实现了用户交互。在这里，按钮的点击事件触发了简朴的用户名和暗码验证，并根据验证结果执行差别的操纵。
  
• 路由导航： 使用 router 模块进行路由导航，根据验证结果跳转到差别的页面。这是应用程序导航的紧张组成部分，使得用户能够在差别的界面之间进行切换。
  
• 模块化开发： 通过导入 router、prompt 和 promptAction 等模块，代码实现了模块化开发的头脑。这种模块化的方式使得代码更加结构清晰，易于维护。
  
• UI 组件的灵活使用： 代码中使用了多种 UI 组件，如 Text、Image、TextInput、Button 等，展示了 HarmonyOS 提供的丰富组件库。这些组件可以通过链式调用方法来设置各种样式和属性，提供了灵活的界面设计选项。
  

总体来说，这段代码是一个入门级别的 HarmonyOS 应用程序示例，涵盖了常见的 UI 布局、状态管理、事件处理和导航等方面。明白这些概念对于开发更复杂的 HarmonyOS 应用程序是很有帮助的。

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