📁 从一个Hello World工程说起

当你用DevEco Studio创建一个新项目时，通常会得到一个这样的工程结构。我们需要关注的核心代码目录有三个：

• AppScope：存放应用的全局配置，比如应用名称和应用图标。

• entry/src/main/ets：主要的编码工作区。应用入口（entryability）和所有页面（pages）都在这里。

• entry/src/main/resources：资源文件目录，用于存放图片、多语言字符串、颜色值等。使用资源文件管理样式是好的实践，能让应用更易于维护。

🚀 页面是如何被加载的：从入口到界面

一个页面从代码到呈现在屏幕上，遵循着清晰的路径：

1. UIAbility (应用入口)：EntryAbility.ets 文件是应用的入口。它在启动时创建“舞台”（WindowStage），并决定首先加载哪个页面。

2. 加载页面：在 onWindowStageCreate 方法中，通过 windowStage.loadContent('pages/Index', ...) 这行代码，指定了要加载的页面是 pages 目录下的 Index.ets 文件。

3. 路由配置：resource/base/profile/main_pages.json 文件就像一张“地图”，所有需要被访问的页面都必须在这里注册。IDE通常会自动帮你完成这一步。

🧱 核心代码逐行拆解

打开 pages/Index.ets 文件，我们通过一个示例来分析其核心构成。

1. 装饰器：为组件赋予“身份”与“能力”

typescript

@Entry // 标记该组件是一个页面入口，与main_pages.json中的配置对应[citation:1]
@Component // 标记这是一个自定义组件，可被其他组件复用[citation:1]
export struct Index { // export导出，使其可以被其他文件导入使用[citation:1]
  // ...
}

• @Entry： 表示这个组件是一个页面，可以从UIAbility被直接加载。

• @Component： 表示这个 struct 结构体是一个自定义组件，它拥有独立的UI构建逻辑。你可以把它看作是乐高积木，用于搭建复杂界面。

• export： 如果你写的组件希望被其他文件引用，就需要使用 export 导出。

2. 响应式数据：UI自动更新的秘密

typescript

@State message: string = 'Hello World'; // 状态变量

@State 装饰器 是声明式UI的“灵魂”。它告诉ArkUI框架：请帮我时刻关注这个 message 变量的变化，一旦它变了，所有用到它的UI都要立刻刷新。

传统的命令式开发（如Android早期）需要你手动找到TextView并调用setText()，而声明式开发（@State）则省去了这一步，极大提升了开发效率，减少了60%的DOM操作量。

3. build函数：用“鱼鳞式”语法描绘UI

build() 函数是组件的“画板”，所有UI元素都在这里定义和布局。这种通过嵌套代码块来描述UI结构的方式，被称为鱼鳞式布局，它让UI结构一目了然。

typescript

build() {
  // 根容器：RelativeContainer（相对布局），占满全屏
  RelativeContainer() { 
    // 子组件：一个文本
    Text(this.message) 
      .id('HelloWorld') // 设置ID，便于锚点定位
      .fontSize($r('app.float.page_text_font_size')) // 从资源文件读取尺寸
      .fontWeight(FontWeight.Bold)
      .alignRules({ // 设置对齐规则：锚点相对于父容器，水平和垂直居中
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .onClick(() => { // 绑定点击事件
        this.message = 'Welcome'; // 点击后更新状态，触发UI刷新
      })
  }
  .height('100%')
  .width('100%')
}

• 容器与组件：RelativeContainer 是布局容器，Text 是基础组件。你可以像搭积木一样组合它们。

• 链式调用：通过 .fontSize()、.onClick() 这样的链式调用，可以非常方便地为组件添加属性和事件，这是声明式UI的典型特征。

• 资源管理 $r()：使用 $r('app.float.xxx') 来引用资源文件中的数值，是实现多设备适配和国际化的关键一步。这能有效减少硬编码，也使应用包体积更小。

• 事件处理：onClick 事件里直接修改 @State 修饰的 message，数据变了，UI就跟着变。这背后正是状态管理机制在生效。

➕ 更多示例项目学什么？

当你掌握了最基础的Hello World，就可以通过更多示例项目来深化理解。这些项目通常涵盖了HarmonyOS开发的核心领域，非常值得深入研究：

这些官方的Codelabs和模板项目，是理解HarmonyOS能力边界和最佳实践的最佳途径。