1.基础

声明式UI:​​
​​核心:​​ 你​​声明​​你想要UI是什么样子(在build()方法里描述),而不是一步步命令式地创建和操作View对象(findViewById, setText, setOnClickListener)。
模块化:​​ 虽然一个页面通常在一个文件,但复杂的UI可以通过​​自定义组件​​(也是struct)拆分成多个可复用的部分,这些组件可以放在不同的文件中。

装饰器(@xxx):​​

​​关键特性:​​ ArkTS大量使用装饰器来增强类、结构体、属性、方法的行为。
​​常见装饰器:​​
@Entry: 标记入口组件。
@State: 标记组件内部的状态变量,变化时驱动UI更新。
@Prop: 用于父子组件间单向数据传递(父->子)。
@Link: 用于父子组件间双向数据绑定。
@Observed& @ObjectLink: 用于观察复杂对象(类)内部属性的变化。
@Builder: 定义可复用的UI片段(Builder方法)。
​​注意:​​ 理解不同装饰器的用途和作用域是掌握ArkTS状态管理和组件通信的关键。

​​组合优于继承:​​ 通过嵌套组件来构建复杂UI,而不是继承复杂的基类。
​​链式调用:​​ 组件的属性设置和事件绑定通常采用链式调用语法(如Button(“Click”).onClick(…).width(100)),使代码更简洁。

反正一句话,很像vue.js,但更好用

// 安卓:XML布局 + ViewModel  
// 鸿蒙:ArkTS声明式UI  
@Entry  
struct HelloPage {  
  @State message: string = "Hello Harmony"  
  build() {  
    Column() {  
      Text(this.message)  // 类似Jetpack Compose  
      Button("Click").onClick(() => this.message = "Clicked!")  
    }  
  }  
}

这就是红码里面完整的一个页面所有的东西。需要一个文件就可以了。在安卓里面它其实是需要一个布局文件,还需要一个逻辑控制文件。

​​@Entry

它标记这个结构体(struct)是应用的​​入口页面​​。相当于Android中的MainActivity或在AndroidManifest.xml中标记为LAUNCHER的Activity。
作用:​​ 告诉鸿蒙系统,当用户启动应用时,应该首先加载并显示这个页面。
​​注意:​​ 一个应用可以有多个@Entry装饰的页面,但通常有一个主入口,鸿蒙应用可以有多个入口,只要加上这个就是一个入口,想到于安卓的暴露的页面,别人也能通过这个页面拉起你的app(需要再module.json5里面配置才可)

struct HelloPage

这就是一个结构体,这个结构体就代表了一个页面

@State message: string = “Hello Harmony”

一个私有的状态变量,Text(this.message) 这里面通过这样的方式绑定到了text的组件上,可以通过改变变量的值来刷新ui,类似vue.js

​​build() { … }

用来定义布局结构,有且只有一个

UI描述 (Column() { … })

Button(“Click”):​​ 这是一个​​按钮组件​​。显示文本“Click”。
​​.onClick(() => this.message = “Clicked!”):​​ 这是给Button组件添加的​​事件处理函数​​(使用​​链式调用​​语法)这里面this.message = "Clicked!"改变了变量的值,会导致界面同时刷新成改变后的值

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐