介绍

Index.ets 通常是应用的 默认首页，使用 ArkTS（鸿蒙生态主推的应用开发语言）编写。它是应用启动后用户 首先看到的界面，承担着展示核心功能入口、用户交互的重要角色。

文件位置

通常位于项目的 entry/src/main/ets/pages 目录下

基本结构

一个典型的 Index.ets 文件包含以下核心部分：

装饰器：用于声明页面组件（@Entry、@Component）。
状态管理：使用 @State、@Prop 等装饰器管理页面数据状态。
UI 构建：通过 build() 方法描述页面布局和组件。
事件处理：定义按钮点击、列表滑动等交互逻辑。

新工程默认代码

@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：标记当前组件为应用的入口页面，整个应用有且仅有一个 @Entry 组件（通常在 Index.ets 中）。
@Component：声明一个自定义组件，鸿蒙应用的UI由多个组件组合而成。

（2）状态管理

@State：组件内部的状态变量，当变量值改变时，引用该变量的UI组件会自动重新渲染（响应式更新）。
其他常用状态装饰器：
- @Prop：子组件接收父组件的状态（单向绑定）。
- @Link：子组件与父组件状态双向绑定。
- @Provide / @Consume：跨组件层级的状态共享。

（3）UI 构建（`build()` 方法）

所有UI元素都在 build() 中定义，采用声明式语法（描述“是什么”，而非“怎么做”）。
常用布局容器：
- Column()：垂直排列子组件。
- Row()：水平排列子组件。
- List()：列表布局，用于展示多条数据。
- Stack()：层叠布局，组件按顺序堆叠。
常用基础组件：
- Text()：文本展示。
- Button()：按钮交互。
- Image()：图片展示（支持本地资源或网络图片）。
- Input()：输入框。

（4）事件处理

通过 onClick()、onChange() 等方法绑定事件，例如按钮点击、输入框内容变化等。
事件处理逻辑通常包括：修改状态变量、调用工具函数、路由跳转等。

注意事项

路由配置：Index.ets 需在下面文件中注册（通常默认已配置），确保应用启动时能正确加载。

src/main/resources/base/profile/main_pages.json

原文出处：/show_1GW1xlt8OeIi.html

介绍