【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

项目背景

本项目渊源已久，优雅草2025年发布，PC端已经发布，将在4月完成成品发布，目前由于考虑到鸿蒙端用户使用，毕竟新一代纯血鸿蒙harmonyos next已经不再支持安卓android，因此优雅草团队必须考虑把鸿蒙端也开发上，以下实战过程完整记录了整个开发过程，优雅草卓伊凡审核代码，记录并更新，再次感谢优雅草团队所有同事们的努力，鸿蒙端为了加速鸿蒙生态已经开源地址供查看，关于优雅草星云物联网AI智控系统可以关注优雅草官网。

项目开源代码地址

https://gitee.com/youyacao/axharmonyos

鸿蒙端运行环境

deveco 5.0.4版本

实战过程

/*
 * Copyright (c) 2025.成都市一颗优雅草科技有限公司
 * author：卓伊凡-优雅草技术总监
 * project：优雅草星云物联网智控AI系统
 */
import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";
import { vp2 } from "@wcmzllx/component-library";
import { router } from "@kit.ArkUI";
@Entry
@ComponentV2
export struct LoginView {
    @Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");
    @Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");
    build() {
        Column() {
            Image($r("app.media.ic_login_icon"))
                .height(vp2.vp2(152))
                .width(vp2.vp2(187))
                .margin({ top: vp2.vp2(123) })
                .autoResize(true)
            Image($r("app.media.ic_brand_icon"))
                .height(vp2.vp2(77.5))
                .width(vp2.vp2(155))
                .margin({ top: vp2.vp2(25.5) })
            Column() {
                Text("网络设备管理系统")
                    .fontSize(19)
                    .lineHeight(vp2.vp2(22.27))
                    .fontColor(commonColor.FONT_SECONDARY_COLOR)
                    .margin({ top: vp2.vp2(43), bottom: vp2.vp2(32) })
                this.loginInput(this.inputUserName)
                Blank().height(vp2.vp2(48))
                this.loginInput(this.inputPassword)
                Button("登录", {type: ButtonType.Normal})
                    .backgroundColor("#008DF0")
                    .borderRadius(5)
                    .height(vp2.vp2(40))
                    .width(vp2.vp2(280.5))
                    .margin({ top: vp2.vp2(48) })
                    .onClick(()=>{
                        router.pushUrl({
                            url: "pages/Index"
                        })
                    })
            }
            .backgroundColor(commonColor.CARD_BACKGROUND_COLOR)
            .borderRadius(15)
            .height(vp2.vp2(345))
            .width(vp2.vp2(317))
            .margin({ top: vp2.vp2(26) })
        }
        .width(CommonConst.GLOBAL_FULL_SCREEN)
        .height(CommonConst.GLOBAL_FULL_SCREEN)
        .linearGradient({
            angle: 3,
            colors: [
                ["#ff10244b", 0],
                ["#ff2656b1", 1]
            ]
        })
    }
    @Builder
    loginInput(params: InputDataModel) {
        Row({ space: vp2.vp2(10) }) {
            Image(params.type === 1 ? $r("app.media.ic_login_user") : $r("app.media.ic_login_password"))
                .width(vp2.vp2(22))
                .aspectRatio(1)
            TextInput({ placeholder: params.placeholder, text: params.input })
                .placeholderColor(commonColor.FONT_TERTIARY_COLOR)
                .placeholderFont({ size: 15 })
                .lineHeight(vp2.vp2(17.58))
                .backgroundColor(Color.Transparent)
                .height(vp2.vp2(40))
                .layoutWeight(1)
                .padding(0)
                .borderRadius(0)
                .margin(0)
                .onChange((event: string) => {
                    params.input = event
                })
        }
        .backgroundColor("#F6F6F6")
        .width(vp2.vp2(283))
        .height(vp2.vp2(40))
        .padding(vp2.vp2(9))
        //.borderWidth(1)
        .borderRadius(10)
        //.borderColor("#FF4D4D")
    }
    onPageHide(): void {
       setTimeout(()=>{
           router.clear()
       }, 1000)
    }
}

这是完整代码，

代码解释

该代码实现了一个登录页面的功能，包含用户输入用户名和密码的输入框、登录按钮以及页面布局。具体功能如下：

页面顶部显示登录图标和品牌图标。
中间区域显示系统名称“网络设备管理系统”。
提供两个输入框分别用于输入用户名和密码，输入框支持占位符提示。
点击“登录”按钮后跳转到“pages/Index”页面。
当页面隐藏时，延迟1秒清除路由记录。

控制流图

flowchart TD
    A[初始化登录页面] --> B[显示登录图标和品牌图标]
    B --> C[显示系统名称]
    C --> D[创建用户名输入框]
    D --> E[创建密码输入框]
    E --> F[添加登录按钮]
    F --> G{点击登录按钮?}
    G -->|是| H[跳转到Index页面]
    H --> I[结束]
    G -->|否| J[等待用户操作]
    K[页面隐藏] --> L[延迟1秒]
    L --> M[清除路由记录]

import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";
import { vp2 } from "@wcmzllx/component-library";
import { router } from "@kit.ArkUI";

这部分代码很重要，首先我们是引入arkui ，再引入arkui我们要用到的组件

以下是对这段代码的详细解释：

整体功能概述

这段代码主要是在进行模块导入操作，通过 import 语句从不同的库中引入特定的变量、组件或对象，以便在当前代码文件中使用这些导入的内容。

具体导入语句解释

1. `import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";`

语法分析：这是一个命名导入语句，使用花括号 {} 来指定要从 @wcmzllx/common-const-library 库中导入的具体内容。
库说明：@wcmzllx/common-const-library 是一个自定义的库，从命名来看，它可能是一个用于存放通用常量、颜色定义以及数据模型等公共资源的库。
导入内容解释：

CommonConst：这可能是一个包含各种通用常量的对象或者类，在项目中可能会用于存储一些固定不变的值，比如接口地址、错误码等。
commonColor：很可能是一个包含常用颜色定义的对象，例如颜色的十六进制值或者 RGB 值，方便在项目中统一管理和使用颜色。
InputDataModel：应该是一个数据模型，用于表示输入数据的结构和格式，在处理用户输入或者数据传输时可能会用到。

2. `import { vp2 } from "@wcmzllx/component-library";`

语法分析：同样是命名导入语句，从 @wcmzllx/component-library 库中导入 vp2。
库说明：@wcmzllx/component-library 是一个自定义的组件库，用于封装和提供各种可复用的组件。
导入内容解释：

vp2：可能是该组件库中定义的一个特定组件，比如一个自定义的视图组件或者功能组件，用于在当前项目中构建用户界面或者实现特定功能。

3. `import { router } from "@kit.ArkUI";`

语法分析：还是命名导入语句，从 @kit.ArkUI 库中导入 router。
库说明：@kit.ArkUI 可能是一个与 ArkUI 框架相关的工具包，ArkUI 是华为鸿蒙系统中用于构建用户界面的框架。
导入内容解释：

router：通常是一个路由对象，用于实现页面之间的导航和路由管理。在应用开发中，通过 router 可以实现页面的跳转、参数传递等功能。

效果预览：

本登录页面很简单，就是一个登录页面，注意的就是登录用户名密码用到的组件，

@ComponentV2
export struct LoginView {
    @Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");
    @Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");
    build() {
        Column() {
            Image($r("app.media.ic_login_icon"))
                .height(vp2.vp2(152))
                .width(vp2.vp2(187))
                .margin({ top: vp2.vp2(123) })
                .autoResize(true)
            Image($r("app.media.ic_brand_icon"))
                .height(vp2.vp2(77.5))
                .width(vp2.vp2(155))
                .margin({ top: vp2.vp2(25.5) })

以下是对这段代码的详细解释：

整体功能概述

这段代码使用 ArkTS（HarmonyOS 应用开发的主力语言）定义了一个名为 LoginView 的组件，该组件用于构建登录界面。它包含了两个输入框的数据模型（用于输入用户名和密码），并在界面上展示了两张图片。

代码逐行解释

1. `@ComponentV2`

这是一个装饰器，用于标识 LoginView 是一个组件。在 ArkTS 中，装饰器可以为类或结构体添加额外的元数据和行为。@ComponentV2 可能是 ArkTS 中用于定义组件的特定版本的装饰器，表明这是一个使用了某种特定版本规范的组件。

2. `export struct LoginView {`

export 关键字用于将 LoginView 结构体导出，使得其他模块可以引入并使用这个组件。
struct 是 ArkTS 中用于定义结构体的关键字，类似于类，但结构体更轻量级，主要用于封装数据。LoginView 结构体将作为一个组件，负责构建登录界面的 UI。

3. `@Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");`

@Local 是一个装饰器，用于标记 inputUserName 是一个本地状态变量。本地状态变量可以在组件内部进行管理和更新，并且当状态变量的值发生变化时，组件会自动重新渲染。
inputUserName 是一个类型为 InputDataModel 的变量。从之前的代码导入可知，InputDataModel 是从 @wcmzllx/common-const-library 库中导入的数据模型。
new InputDataModel("", 1, "请输入用户名称") 是创建 InputDataModel 类的一个实例，初始值为空字符串，可能使用 1 作为某种标识，并且设置了占位符文本为 “请输入用户名称”。

4. `@Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");`

与 inputUserName 类似，inputPassword 也是一个本地状态变量，用于存储用户输入的密码。它同样是 InputDataModel 类型的实例，初始值为空字符串，使用 2 作为标识，占位符文本为 “请输入密码”。

5. `build() {`

build 方法是组件的核心方法，用于构建组件的 UI 界面。在 ArkTS 中，组件的 UI 是通过在 build 方法中使用各种 UI 组件和布局来定义的。

6. `Column() {`

Column 是 ArkTS 中的一个布局组件，用于将子组件垂直排列。所有在 Column 块内的组件都会按照从上到下的顺序依次排列。

7. `Image($r("app.media.ic_login_icon"))`

Image 是 ArkTS 中的一个 UI 组件，用于显示图片。
$r("app.media.ic_login_icon") 是资源引用语法，用于引用应用中的媒体资源。app.media.ic_login_icon 表示应用资源中的一个图片资源，具体的图片文件可能存储在项目的资源目录中。

8. `.height(vp2.vp2(152))`

height 是 Image 组件的一个属性方法，用于设置图片的高度。
vp2.vp2(152) 调用了从 @wcmzllx/component-library 库中导入的 vp2 组件的 vp2 方法，将传入的数值 152 转换为特定的尺寸单位（可能是虚拟像素 vp），从而设置图片的高度。

9. `.width(vp2.vp2(187))`

与 height 类似，width 方法用于设置图片的宽度，同样使用 vp2.vp2(187) 来指定宽度的尺寸。

10. `.margin({ top: vp2.vp2(123) })`

margin 是设置组件外边距的属性方法，通过传入一个对象来指定各个方向的外边距。这里只设置了顶部外边距为 vp2.vp2(123)，即图片距离上方元素的距离。

11. `.autoResize(true)`

autoResize 是 Image 组件的一个属性方法，用于设置图片是否自动调整大小以适应容器。true 表示开启自动调整大小功能。

12. `Image($r("app.media.ic_brand_icon"))`

同样是创建一个 Image 组件，用于显示应用资源中的另一个图片 app.media.ic_brand_icon。

13. `.height(vp2.vp2(77.5))`、`.width(vp2.vp2(155))`、`.margin({ top: vp2.vp2(25.5) })`

这些属性方法的作用与前面的 Image 组件类似，分别用于设置图片的高度、宽度和顶部外边距。

【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

项目背景

项目开源代码地址

鸿蒙端运行环境

实战过程

代码解释

控制流图

整体功能概述

具体导入语句解释

1. `import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";`

2. `import { vp2 } from "@wcmzllx/component-library";`

3. `import { router } from "@kit.ArkUI";`

整体功能概述

代码逐行解释

1. `@ComponentV2`

2. `export struct LoginView {`

3. `@Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");`

4. `@Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");`

5. `build() {`

6. `Column() {`

7. `Image($r("app.media.ic_login_icon"))`

8. `.height(vp2.vp2(152))`

9. `.width(vp2.vp2(187))`

10. `.margin({ top: vp2.vp2(123) })`

11. `.autoResize(true)`

12. `Image($r("app.media.ic_brand_icon"))`

13. `.height(vp2.vp2(77.5))`、`.width(vp2.vp2(155))`、`.margin({ top: vp2.vp2(25.5) })`

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡

项目背景

项目开源代码地址

鸿蒙端运行环境

实战过程

代码解释

控制流图

整体功能概述

具体导入语句解释

1. import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";

2. import { vp2 } from "@wcmzllx/component-library";

3. import { router } from "@kit.ArkUI";

整体功能概述

代码逐行解释

1. @ComponentV2

2. export struct LoginView {

3. @Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");

4. @Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");

5. build() {

6. Column() {

7. Image($r("app.media.ic_login_icon"))

8. .height(vp2.vp2(152))

9. .width(vp2.vp2(187))

10. .margin({ top: vp2.vp2(123) })

11. .autoResize(true)

12. Image($r("app.media.ic_brand_icon"))

13. .height(vp2.vp2(77.5))、.width(vp2.vp2(155))、.margin({ top: vp2.vp2(25.5) })

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1. `import { CommonConst, commonColor, InputDataModel } from "@wcmzllx/common-const-library";`

2. `import { vp2 } from "@wcmzllx/component-library";`

3. `import { router } from "@kit.ArkUI";`

1. `@ComponentV2`

2. `export struct LoginView {`

3. `@Local inputUserName: InputDataModel = new InputDataModel("", 1, "请输入用户名称");`

4. `@Local inputPassword: InputDataModel = new InputDataModel("", 2, "请输入密码");`

5. `build() {`

6. `Column() {`

7. `Image($r("app.media.ic_login_icon"))`

8. `.height(vp2.vp2(152))`

9. `.width(vp2.vp2(187))`

10. `.margin({ top: vp2.vp2(123) })`

11. `.autoResize(true)`

12. `Image($r("app.media.ic_brand_icon"))`

13. `.height(vp2.vp2(77.5))`、`.width(vp2.vp2(155))`、`.margin({ top: vp2.vp2(25.5) })`