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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。

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

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

在科技不断迭代更新的今天,每一次技术的飞跃都是对未来的深刻探索。华为,这个始终站在科技前沿的企业,再次以HarmonyOS 5.0(Next)这一操作系统的新篇章,向我们展示了科技如何以前所未有的方式改变我们的生活。这不仅仅是一次操作系统的升级,更是一次对未来智能生活可能性的深度挖掘和呈现。
在这里插入图片描述

HarmonyOS 5.0(Next)以“未来美学”为核心理念,将科技与艺术完美融合。系统界面采用了全新的设计风格,通过细腻的动画效果和丰富的色彩搭配,为用户带来一场视觉盛宴。同时,系统还支持个性化定制,用户可以根据自己的喜好选择主题、壁纸、图标等元素,打造属于自己的专属界面。
在这里插入图片描述

HarmonyOS 5.0(Next)进一步强化了分布式软总线技术,实现了智能设备间的无缝连接和协同工作。无论是智能家居、智能穿戴设备,还是智能办公设备,都能轻松接入鸿蒙生态,实现信息共享和智能联动。用户只需轻轻一触,即可享受智能家居带来的便捷和舒适,让智能生活触手可及。

本页面实战效果预览图

在这里插入图片描述

一.HarmonyOS应用开发

1.1HarmonyOS 详解

HarmonyOS(鸿蒙操作系统)是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统,旨在实现在各种设备之间的无缝协同和共享,包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。

以下是一些 HarmonyOS 的关键特点和设计理念:

  1. 全场景适配: HarmonyOS 被设计为一个全场景操作系统,可以在各种终端设备上运行,无论是小型传感器设备还是大型的显示屏幕设备。

  2. 分布式架构: HarmonyOS 引入了分布式架构的概念,使得多个设备能够协同工作,共同完成任务。这使得设备之间的通信更加灵活,用户体验更加一致。

  3. 一次开发,多端部署: HarmonyOS 提倡一次开发,多端部署的理念,开发者可以使用相同的代码和开发工具,将应用程序轻松部署到不同类型的设备上。

  4. 微内核架构: HarmonyOS 使用微内核架构,将操作系统内核划分为一个小型的内核和一系列服务。这有助于提高系统的可靠性和安全性,并简化系统的维护和升级。

  5. 面向未来的技术: HarmonyOS 支持面向未来的技术,包括分布式数据管理、分布式安全、分布式图形等。这使得系统更具创新性,适应未来设备和应用的发展。

  6. 开放源代码: 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
@Component
struct 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 组件进行页面布局和交互的代码。以下是对代码的分析:

  1. 导入模块:

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

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

  2. 页面定义:

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

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

  3. 状态管理:

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

    使用 @State 注解定义了三个状态变量 passwordusernamephone

  4. UI 布局:

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

    build 方法中,使用 HarmonyOS 提供的 UI 组件进行页面布局,包括 ColumnRowTextImageTextInputDivider 等。通过这些组件的嵌套和设置属性,构建了登录页面的 UI 结构。

  5. 事件处理:

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

    当点击登录按钮时,会执行相应的事件处理代码。在这里,根据输入的用户名和密码进行简单的验证,如果是 admin/admin 则导航到首页,否则显示错误提示。

  6. 页面元素设置:
    设置了页面中的文字大小、字体加粗、边距、背景颜色等属性,以及按钮的点击事件处理。

2.3 心得

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

  1. 声明式 UI 布局: HarmonyOS 使用声明式 UI 的方式,通过组合不同的 UI 组件和设置属性来构建用户界面。这种方式使得 UI 布局清晰易读,更容易理解和维护。

  2. 状态管理: 使用 @State 注解来定义状态变量,这些变量用于跟踪用户输入的数据。状态管理是构建交互式应用程序的关键,它允许界面与数据同步更新。

  3. 事件处理: 通过为按钮等组件添加事件处理函数,实现了用户交互。在这里,按钮的点击事件触发了简单的用户名和密码验证,并根据验证结果执行不同的操作。

  4. 路由导航: 使用 router 模块进行路由导航,根据验证结果跳转到不同的页面。这是应用程序导航的重要组成部分,使得用户能够在不同的界面之间进行切换。

  5. 模块化开发: 通过导入 routerpromptpromptAction 等模块,代码实现了模块化开发的思想。这种模块化的方式使得代码更加结构清晰,易于维护。

  6. UI 组件的灵活使用: 代码中使用了多种 UI 组件,如 TextImageTextInputButton 等,展示了 HarmonyOS 提供的丰富组件库。这些组件可以通过链式调用方法来设置各种样式和属性,提供了灵活的界面设计选项。

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

相关文章
|
8天前
|
数据采集 Web App开发 JavaScript
DOMParser解析TikTok页面中的图片元素
DOMParser解析TikTok页面中的图片元素
|
1月前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
46 3
|
1月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
61 2
|
1月前
|
搜索推荐 UED Python
实现一个带有昼夜背景切换的动态时钟:从代码到功能解析
本文介绍了一个使用Python和Tkinter库实现的动态时钟程序,具有昼夜背景切换、指针颜色随机变化及整点和半点报时功能。通过设置不同的背景颜色和随机变换指针颜色,增强视觉吸引力;利用多线程技术确保音频播放不影响主程序运行。该程序结合了Tkinter、Pygame、Pytz等库,提供了一个美观且实用的时间显示工具。欢迎点赞、关注、转发、收藏!
134 94
|
1月前
|
SQL Java 数据库连接
如何在 Java 代码中使用 JSqlParser 解析复杂的 SQL 语句?
大家好,我是 V 哥。JSqlParser 是一个用于解析 SQL 语句的 Java 库,可将 SQL 解析为 Java 对象树,支持多种 SQL 类型(如 `SELECT`、`INSERT` 等)。它适用于 SQL 分析、修改、生成和验证等场景。通过 Maven 或 Gradle 安装后,可以方便地在 Java 代码中使用。
233 11
|
1月前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
57 5
|
1月前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
53 1
|
3月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
130 2
|
2月前
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
2月前
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析

热门文章

最新文章

推荐镜像

更多