HarmonyOS 基础用法整理

1. 页面结构与组件

HarmonyOS 采用 ArkUI（JS/TS/ETS）进行页面开发，常用组件有：<div>, <text>, <image>, <button> 等。
页面文件通常包含三部分：结构（.ets/.js）、样式（.css）、逻辑（.ets/.js）。

示例：

// index.ets
@Entry
@Component
struct MyPage {
  build() {
    Column() {
      Text('Hello HarmonyOS')
      Button('点击我')
        .onClick(() => {
          // 事件处理
        })
    }
    .width('100%')
    .height('100%')
  }
}

2. 状态管理

使用 @State 修饰符声明响应式数据，数据变化自动刷新视图。

@Entry
@Component
struct Counter {
  @State count: number = 0

  build() {
    Column() {
      Text(`计数：${this.count}`)
      Button('加一').onClick(() => {
        this.count++
      })
    }
  }
}

3. 事件绑定

通过 .onClick、.onChange 等方法绑定事件。

Button('提交').onClick(() => {
  // 处理点击事件
})

4. 条件渲染与列表渲染

条件渲染：使用三元表达式或 if 语句。
列表渲染：使用 ForEach 组件。

@State items: string[] = ['A', 'B', 'C']

build() {
  Column() {
    ForEach(this.items, (item) => {
      Text(item)
    })
  }
}

5. 生命周期

组件支持生命周期方法，如 aboutToAppear、aboutToDisappear。

aboutToAppear() {
  // 页面显示时执行
}
aboutToDisappear() {
  // 页面隐藏时执行
}

6. 样式设置

使用链式调用设置样式，如 .width(), .height(), .fontSize(), .backgroundColor()。

Text('标题')
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
  .backgroundColor('#f5f5f5')

7. 路由跳转

使用 router.pushUrl() 进行页面跳转。

Button('跳转').onClick(() => {
  router.pushUrl({ url: 'pages/detail' })
})