【鸿蒙App】ArkTD/ArkUI核心语法和开发要点-CSDN博客

本文链接：https://blog.csdn.net/umut9/article/details/149105877

ArkTS 是华为为鸿蒙OS（HarmonyOS）设计的主力开发语言，基于 TypeScript（TS）扩展，结合了声明式UI框架 ArkUI，用于高效开发原生鸿蒙应用。以下是 ArkTS/ArkUI 的核心语法和开发要点：

1. ArkTS 基础语法

ArkTS 是 TypeScript 的超集，继承了 TS 的静态类型、类、模块等特性，并增加了鸿蒙特有的装饰器和API。

1.1 基本类型与变量

// 1. 变量声明（支持类型推断）
let name: string = "HarmonyOS";  // 显式类型
let version = 4.0;              // 自动推断为 number

// 2. 常量
const isNEXT: boolean = true;

// 3. 联合类型
let device: "phone" | "tablet" | "tv" = "phone";

1.2 函数

// 普通函数
function greet(message: string): void {
  console.log(message);
}

// 箭头函数
const sum = (a: number, b: number): number => a + b;

1.3 类与继承

class Device {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  boot(): void {
    console.log(`${this.name} is booting...`);
  }
}

class Phone extends Device {
  call(): void {
    console.log("Making a call...");
  }
}

2. ArkUI 声明式语法

ArkUI 采用声明式UI开发模式（类似 SwiftUI/Flutter），通过装饰器（如@Entry、@Component）定义组件。

2.1 基本组件

@Entry
@Component
struct MyComponent {
  // 状态变量（触发UI更新）
  @State count: number = 0;

  build() {
    // 必须返回一个根组件（如 Column, Row, Stack）
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(20)
        .fontColor("#FF0000")

      Button("Click Me")
        .onClick(() => {
          this.count++; // 修改状态自动更新UI
        })
    }
    .width("100%")
    .height("100%")
  }
}

常用内置组件

组件	说明	示例
`Text`	文本	`Text("Hello")`
`Button`	按钮	`Button("OK")`
`Image`	图片	`Image("res/icon.png")`
`Column`	垂直布局	`Column() { ... }`
`Row`	水平布局	`Row() { ... }`
`Stack`	层叠布局	`Stack() { ... }`

2.2 状态管理

1. `@State`

组件内部状态，变化时触发UI更新。

@State isActive: boolean = false;

Button(this.isActive ? "Active" : "Inactive")
  .onClick(() => {
    this.isActive = !this.isActive;
  })

2. `@Prop`

从父组件传递的可变状态。

@Component
struct ChildComponent {
  @Prop message: string; // 父组件传递的值
  // ...
}

3. `@Link`

双向绑定，父子组件共享状态。

@Component
struct ParentComponent {
  @State sharedValue: number = 0;

  build() {
    Column() {
      ChildComponent({ value: $sharedValue }) // 使用 $ 符号传递Link
    }
  }
}

@Component
struct ChildComponent {
  @Link value: number; // 修改会影响父组件
}

2.3 条件与循环渲染

条件渲染：`if` 语句

Column() {
  if (this.isActive) {
    Text("Active").fontSize(20)
  } else {
    Text("Inactive").fontColor("gray")
  }
}

循环渲染：`ForEach`

@State items: string[] = ["Apple", "Banana", "Orange"];

Column() {
  ForEach(this.items, (item: string) => {
    Text(item)
      .margin(5)
  })
}

3. 页面导航与生命周期

3.1 页面跳转（路由）

import router from '@ohos.router';

// 跳转到指定页面
router.pushUrl({
  url: "pages/DetailPage",
  params: { id: 123 } // 传递参数
});

// 接收参数
@State id: number = 0;

onPageShow() {
  const params = router.getParams();
  this.id = params?.id || 0;
}

3.2 生命周期

装饰器	说明
`onPageShow`	页面显示时触发
`onPageHide`	页面隐藏时触发
`onBackPress`	返回按钮事件

@Entry
@Component
struct HomePage {
  onPageShow() {
    console.log("Page shown");
  }
}

4. 样式与布局

4.1 内联样式

Text("Hello ArkUI")
  .fontSize(20)
  .fontColor("#FF0000")
  .margin({ top: 10, bottom: 10 })

4.2 外部样式（`styles.ets`）

// 定义样式
export const titleStyle = {
  fontSize: 24,
  fontWeight: "bold",
  color: "#000000"
};

// 使用样式
import { titleStyle } from "../styles.ets";

Text("Title")
  .style(titleStyle)

5. 网络请求

使用鸿蒙的@ohos.net.http模块：

import http from '@ohos.net.http';

let request = http.createHttp();
request.request(
  "https://api.example.com/data",
  {
    method: "GET",
    header: { "Content-Type": "application/json" }
  },
  (err, data) => {
    if (!err) {
      console.log("Response:", data.result);
    }
  }
);