日期：2024年12月27日
作者：Commas（程序员阿康）
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

---

一、前言

---

在当今多设备互联的时代，鸿蒙操作系统（HarmonyOS）以其跨平台、轻量级的特性受到了广大开发者的关注。本文将带您深入探讨鸿蒙 HarmonyOS Next 中的 ArkTS（Ark TypeScript）组件开发，通过上期所述的 Hello World 示例，让您快速掌握鸿蒙应用的基本开发技巧。

二、鸿蒙HarmonyOS Next简介

---

鸿蒙操作系统是华为推出的一款面向未来的全场景分布式操作系统，旨在为不同类型的设备提供统一的开发体验和用户体验。而 HarmonyOS Next 是鸿蒙操作系统的最新版本，它为开发者提供了更加丰富的API和工具，使得开发跨设备应用变得更加简单。ArkTS 是 HarmonyOS Next 中的一种扩展的 TypeScript 语言，它为开发者提供了更加强大的功能，使得应用开发更加高效。

三、Hello World 示例解析

---

让我们从一个简单的“Hello World”示例开始，逐步揭开ArkTS组件开发的神秘面纱。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

1、应用入口点：@Entry

在鸿蒙 HarmonyOS Next 中，每个应用都需要一个入口点，这个入口点通过 @Entry装饰器 来标识。以下代码展示了如何定义一个应用入口组件：

@Entry
@Component
struct Index {
  // 组件代码...
}

@Entry装饰器 告诉鸿蒙框架，当应用启动时，应该首先渲染这个组件。

2、定义组件：@Component

@Component装饰器 用于标识 一个类为一个组件。在 ArkTS 中，我们使用 结构体（struct） 来定义组件，其中 Index 为以下组件的名称，如下所示：

@Component
struct Index {
  // 组件代码...
}

这类似于其他编程语言中的 类（class），用于封装组件的状态和行为。

3、状态管理：@State

在组件中，我们经常需要管理一些可变的数据，这些数据称为状态。在 ArkTS 中，我们使用 @State装饰器 来定义状态变量：

@State message: string = 'Hello World';

状态变量 用于存储 组件的可变数据。当状态发生变化时，框架会自动重新渲染组件以反映最新的状态。这实现了 数据驱动 UI 的现代开发模式，和之前讲过的 Vue3 中的 ref、reactive 有着异曲同工之妙。

4、 构建UI：build方法

每个组件都需要一个 build 方法，用于定义 组件的UI结构。以下代码展示了如何在 build 方法中创建一个文本组件：

build() {
  // 组件代码...
}

这是组件的核心方法，框架会调用它来生成和更新UI。在 声明式UI 中，build 方法描述了组件的当前状态和 UI布局。

5、RelativeContainer 布局容器

RelativeContainer 是一个布局容器组件，类似于 Web 开发中的 div，但具有更强大的布局能力。它允许我们在其中以相对定位的方式排列子组件，为创建复杂而灵活的 UI 布局提供了基础。通过将子组件放置在 RelativeContainer 中，我们可以精确地控制它们之间的相对位置关系，以适应不同的屏幕尺寸和设备类型。

RelativeContainer() {
  // 组件代码...
}
.height('100%')
.width('100%')

height 和 width 方法用于设置组件的高度和宽度。在这个示例中，我们将 RelativeContainer 的高度和宽度设置为100%，使其填满父容器的全部空间。

6、Text 组件

Text 是一个用于显示文本的组件，用于在屏幕上显示文本内容。通过将 this.message 绑定到 Text 组件上，我们实现了数据与 UI 的关联，使得组件能够动态地显示状态变量的值。

Text(this.message)
  .id('HelloWorld')
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .alignRules({
    center: { anchor: '__container__', align: VerticalAlign.Center },
    middle: { anchor: '__container__', align: HorizontalAlign.Center }
  })..

在 ArkTS 中，许多方法支持链式调用，这使得代码更加简洁和易读。我们也采用了链式调用的方法用于设置文本组件的各种属性，分析如下：

• .id('HelloWorld')：设置组件的唯一标识符为 HelloWorld，便于调试或引用。
• .fontSize(50)：设置文本的字体大小为 50。
• .fontWeight(FontWeight.Bold)： 设置文本的字体粗细为粗体。
• .alignRules({ ... })： 设置文本的对齐规则：
  • 垂直居中（center）: 设置文本在垂直方向上相对于容器居中。
  • 水平居中（middle）: 设置文本在水平方向上相对于容器居中。

三、结语

---

通过对这段简单而又经典的 Hello World 代码的深入分析，我们初步领略了鸿蒙开发的基本概念和编程模式。从 ArkTS 语言的运用，到组件的创建、状态管理以及布局构建，每一个环节都紧密相连，共同构建出一个完整的鸿蒙应用界面。最后，希望本文能为正在或计划开发鸿蒙应用的小伙伴们提供一些有益的参考和启示。

---

参考文章：

• 《HarmonyOS技术文档》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/144741197