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!"改变了变量的值,会导致界面同时刷新成改变后的值