概况

• 主力语言：ArkTS；界面开发：ArkUI
• 类比：ArkTS + ArkUI；对应JS + (HTML~CSS)
• 前面是后面的超集：ArkTS（eTS）>>> TS >>> JS
• 编辑器使用DevEco Studio（“Powered by IntelliJ Platform” ——意味着 DevEco Studio 是基于 IntelliJ IDEA 的底层框架开发出来的。）

核心优势

• ArkUI：声明式（链式属性） + 响应式（数据驱动UI更新）

关键目录

• AppScope > app.json5：应用的全局配置信息。
• entry > src > main > ets > entryability：应用或元服务的入口，可以配置作为首页加载的页面。
  • 在应用启动时，系统会通过windowStage.loadContent方法指定所传入路径的文件作为应用启动的首页，默认为“pages/Index.ets”。
  • 若需要更改首页，只需将路径修改为对应文件的路径，并将其添加至main_pages.json5文件中即可。
• entry > src > main > ets > pages：存放应用或元服务包含的页面。
• entry > src > main > resources：用于存放应用或元服务模块所需的资源文件
  • 如多媒体（图片、音频、视频等）、json配置文件（字符串、颜色等）。
  • 资源文件夹相当于应用的素材库，图片、文字、颜色和尺寸均应存放在resources文件夹中，以便于统一管理和复用。

常用装饰器

• @Component（组件装饰器）：用于装饰用struct关键字声明的结构体，将其转换为一个可复用的自定义组件。
  • 一个按钮、一段文本或整个页面，都可以视为一个组件。
• @Entry（入口装饰器）：用于标记该自定义组件作为入口页面。
  • 被它装饰的组件，在加载时可以作为应用的首个页面显示。
• @State（状态装饰器）：用于装饰组件内部的变量。——只能监听对象的第一层属性发生变化
  • 当这种变量的值发生改变时，使用了该变量的界面部分会自动同步更新，无需手动刷新。
• @Observed（可被观察）：将自定义的类标记成一个“可被观察”的数据模型，系统会自动监听它内部属性的变化，并在变化时触发UI刷新。——弥补@State的不足，当出现嵌套结构时，就需要使用 @Observed + @ObjectLink
• @prop：从父组件接收数据，单向同步。
• @Link：从父组件接收数据，双向同步。
• @Provide / @Consume：跨层级传递数据，类似“依赖注入”。
• @Watch：监听一个状态变量的变化，并触发回调。
• @Builder：标记一个自定义构建函数，用于封装UI片段。

@Observed + @ObjectLink例子

// 定义产品类 用 @Observed 将 Product 类标记为可观察类。
@Observed 
class Product {
  name: string;
  price: number;
  constructor(n: string, p: number) {
    this.name = n;
    this.price = p;
  }
}

• 这是父子组件传递数据的例子：

// 父组件
@Component
struct ProductList {
  @State products: Product[] = [new Product("手机", 5000), new Product("电脑", 8000)];

  build() {
    List() {
      ForEach(this.products, (item: Product) => {
        ListItem() {
          // ✅ 正确：传递整个 Product 实例
          ProductItem({ product: item })
        }
      })
    }
  }
}

// 子组件
@Component
struct ProductItem {
  // ✅ 使用 @ObjectLink 接收父组件传递的、被 @Observed 标记的实例
  @ObjectLink product: Product

  build() {
    Column() {
      Text(`商品名: ${this.product.name}`) 
      Text(`价格: ${this.product.price}`) 
      Button("涨价100块")
        .onClick(() => {
          // ✅ 正确：修改 @ObjectLink 对象的属性，会触发UI更新
          this.product.price += 100; 
        })
    }
  }
}

// 代码解释（双向绑定）：

//父组件 (ProductList)：用 @State 修饰一个被 @Observed 标记的类的数组。

//子组件 (ProductItem)：用 @ObjectLink 接收父组件传来的、被 @Observed 标记的类的实例。

//数据绑定：这样，子组件修改 product 的属性会同步到父组件（双向绑定）；父组件修改整个数组，子组件也能感知到并刷新。