鸿蒙登录页面好看的样式设计 -HarmonyOS 应用开发实战与 ArkTS 代码解析【HarmonyOS 5.0（Next）】

2024-12-22
内蒙古
本文字数：4074 字
阅读完需：约 13 分钟

鸿蒙登录页面好看的样式设计-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 页面源码

import router from '@ohos.router'import prompt from '@ohos.prompt'import promptAction from '@ohos.promptAction'// import {Login, AuthMode} from "@ohos/agconnect-auth-component";@Entry@Componentstruct LoginPage {  @State password: string = ''  @State username: string = ''  @State phone: string = ''  build() {    Column() {      Text("登陆")        .fontSize(50)        .fontWeight(FontWeight.Bold).margin({        bottom: 60      })      Row() {        Text("用户名")          .fontSize(18)          .fontWeight(FontWeight.Bold)      }.width("100%")
      Row() {        Image($r("app.media.name")).width(30)        TextInput({          placeholder: "请输入用户名"        }).width(300).onChange((val: string) => {          this.username = val        })      }.margin({        bottom: 8,        top: 8      }).width("100%")
      Divider().strokeWidth(4)
      Row() {        Text("密码")          .fontSize(18)          .fontWeight(FontWeight.Bold).margin({          bottom: 8,          top: 8        })      }.width("100%")
      Row() {        Image($r("app.media.password")).width(30)
        TextInput({          placeholder: "请输入密码"        }).width(300).onChange((val: string) => {          this.password = val        }).type(InputType.Password)      }.width("100%")
      Divider().strokeWidth(4)      Row() {        Blank()        Text("忘记密码？")          .fontSize(18)          .fontWeight(FontWeight.Bold)      }.width("100%")
      Button("登陆").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {        if (this.username == "admin" && this.password == "admin") {          router.replaceUrl({            url: "page/homepage",            params: {              name: this.username            }          })        }        else {          promptAction.showToast({            message:"密码或用户名错误，请重新输入"          })        }      }).margin({        top: 30,      })
      Row() {        Button('第三方登陆')          .width("140vp")          .height("80vp")          .fontSize(20)          .margin({            bottom: 40,            top: 60,            right: 20          })        Button('立即注册')          .width("140vp")          .height("80vp")          .fontSize(20)          .margin({            bottom: 40,            top: 60,          })      }      Image($r("app.media.logo")).width(80)    }    .width('100%')    .height('100%')    .justifyContent(FlexAlign.Center)    .alignItems(HorizontalAlign.Center)    .padding({      left: 20,      right: 20    })  }}

复制代码

2.2 代码解析

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

导入模块：

   import router from '@ohos.router'   import prompt from '@ohos.prompt'   import promptAction from '@ohos.promptAction'

复制代码

这里导入了一些 HarmonyOS 提供的模块，包括用于导航的 router 模块和用于提示的 prompt 和 promptAction 模块。

页面定义：

   @Entry   @Component   struct LoginPage {     // ...   }

复制代码

使用了 HarmonyOS 的注解（@Entry 和 @Component）来定义一个名为 LoginPage 的页面组件。

状态管理：

   @State password: string = ''   @State username: string = ''   @State phone: string = ''

复制代码

使用 @State 注解定义了三个状态变量 password、username 和 phone。

UI 布局：

   build() {     Column() {       // ... UI 布局代码     }     .width('100%')     .height('100%')     .justifyContent(FlexAlign.Center)     .alignItems(HorizontalAlign.Center)     .padding({       left: 20,       right: 20     })   }

复制代码

在 build 方法中，使用 HarmonyOS 提供的 UI 组件进行页面布局，包括 Column、Row、Text、Image、TextInput、Divider 等。通过这些组件的嵌套和设置属性，构建了登录页面的 UI 结构。

事件处理：

   Button("登陆").onClick(() => {     // ... 按钮点击事件处理代码   })

复制代码

当点击登录按钮时，会执行相应的事件处理代码。在这里，根据输入的用户名和密码进行简单的验证，如果是 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 应用程序是很有帮助的。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/3742d6fde961e7dfc9f6b4300】。文章转载请联系作者。

申公豹

关注

申公豹本豹 2023-06-05 加入

🏆2022年InfoQ写作平台-签约作者 🏆

发布

暂无评论

创作场景

鸿蒙登录页面好看的样式设计 -HarmonyOS 应用开发实战与 ArkTS 代码解析【HarmonyOS 5.0（Next）】

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

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

本页面实战效果预览图

一.HarmonyOS 应用开发

1.1HarmonyOS 详解

1.2 ArkTS 详解

二.HarmonyOS 应用开发实战—登录页面【ArkTS】

2.1 ArkTS 页面源码

2.2 代码解析

2.3 心得

申公豹

评论