ArkUI 的核心语法，一篇文章讲清楚

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验 。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

展菲：您的前沿技术领航员

👋 大家好，我是展菲！

📱 全网搜索"展菲"，即可纵览我在各大平台的知识足迹。

📣 公众号"Swift社区"，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。

💬 微信端添加好友"fzhanfei"，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。

📅 最新动态：2025 年 3 月 17 日

快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！

文章目录

- 引言
- [一、ArkUI 的本质：状态驱动 UI](#一、ArkUI 的本质：状态驱动 UI)
- 二、核心语法一：@Component
- - 定义组件
  - 页面入口
- [三、核心语法二：build（UI 描述）](#三、核心语法二：build（UI 描述）)
- - [声明式 UI](#声明式 UI)
  - 嵌套结构
- 四、核心语法三：@State
- - 定义状态
  - 修改状态
  - 示例
- [五、核心语法四：数据传递（@Prop / @Link）](#五、核心语法四：数据传递（@Prop / @Link）)
- - 1、@Prop（单向传递）
  - - 子组件
    - 父组件
  - 2、@Link（双向绑定）
  - - 子组件
    - 父组件
- 六、核心语法五：事件（Event）
- - 点击事件
  - 输入事件
- 七、核心语法六：条件渲染
- 八、核心语法七：列表渲染
- 九、核心语法八：样式与布局
- - 常用布局
  - 样式链式写法
- 十、核心语法九：生命周期
- - 页面加载
  - 页面销毁
- [十一、核心语法十：状态 + UI 的完整链路](#十一、核心语法十：状态 + UI 的完整链路)
- - 示例
- 十二、最容易踩的坑
- - [1、直接操作 DOM](#1、直接操作 DOM)
  - [2、手动刷新 UI](#2、手动刷新 UI)
  - 3、状态滥用
  - 4、数据不分层
- [十三、一句话总结 ArkUI 语法](#十三、一句话总结 ArkUI 语法)
- 总结

引言

很多人刚接触 HarmonyOS 的 ArkUI 时，会有一种感觉：

"语法不多，但总感觉写不对。"

问题不在于 API，而在于：

你还没理解 ArkUI 的"核心语法模型"

这篇文章，我们不做零散讲解，而是用一条主线，把 ArkUI 的核心语法一次讲清楚：

复制代码

状态（State） → UI（Component） → 数据流（Data Flow）

一、ArkUI 的本质：状态驱动 UI

先看一段最简单代码：

ts 复制代码

@Entry
@Component
struct Counter {

  @State count: number = 0

  build() {
    Column() {
      Text(`${this.count}`)
      Button("+1")
        .onClick(() => {
          this.count++
        })
    }
  }

}

这里发生了什么？

复制代码

count 变化 → UI 自动更新

核心原则：

你不需要"刷新 UI"，只需要修改状态

二、核心语法一：@Component

定义组件

ts 复制代码

@Component
struct MyView {

  build() {
    Text("Hello ArkUI")
  }

}

每一个 UI 单元，本质都是组件。

页面入口

ts 复制代码

@Entry
@Component
struct MainPage {

  build() {
    Text("首页")
  }

}

@Entry 表示应用入口。

三、核心语法二：build（UI 描述）

声明式 UI

ts 复制代码

build() {
  Column() {
    Text("标题")
    Button("按钮")
  }
}

重点：

你描述 UI 是什么，而不是怎么画出来

嵌套结构

ts 复制代码

Column() {
  Row() {
    Text("左")
    Text("右")
  }
}

类似"树结构"。

四、核心语法三：@State

定义状态

ts 复制代码

@State count: number = 0

修改状态

ts 复制代码

this.count++

自动触发 UI 更新。

示例

ts 复制代码

Text(`${this.count}`)

状态绑定 UI。

五、核心语法四：数据传递（@Prop / @Link）

1、@Prop（单向传递）

子组件

ts 复制代码

@Component
struct Child {

  @Prop title: string

  build() {
    Text(this.title)
  }

}

父组件

ts 复制代码

Child({ title: "Hello" })

特点：

只读，不可修改

2、@Link（双向绑定）

子组件

ts 复制代码

@Component
struct Child {

  @Link count: number

  build() {
    Button("+1")
      .onClick(() => this.count++)
  }

}

父组件

ts 复制代码

@State count: number = 0

Child({ count: $count })

特点：

子组件可以修改父状态

六、核心语法五：事件（Event）

点击事件

ts 复制代码

Button("点击")
  .onClick(() => {
    console.log("clicked")
  })

输入事件

ts 复制代码

TextInput()
  .onChange((value) => {
    this.text = value
  })

本质：

事件 → 修改状态

七、核心语法六：条件渲染

ts 复制代码

if (this.count > 0) {
  Text("大于 0")
} else {
  Text("等于 0")
}

UI 随状态变化。

八、核心语法七：列表渲染

ts 复制代码

@State list: string[] = ["A", "B", "C"]

ForEach(this.list, (item: string) => {
  Text(item)
})

用于渲染集合数据。

九、核心语法八：样式与布局

常用布局

ts 复制代码

Column()
Row()
Stack()

样式链式写法

ts 复制代码

Text("Hello")
  .fontSize(20)
  .color(Color.Red)
  .margin(10)

特点：

链式调用（Fluent API）

十、核心语法九：生命周期

页面加载

ts 复制代码

aboutToAppear() {
  this.loadData()
}

页面销毁

ts 复制代码

aboutToDisappear() {
}

用于处理：

请求数据
初始化

十一、核心语法十：状态 + UI 的完整链路

我们把所有语法串起来：

示例

ts 复制代码

@Entry
@Component
struct Demo {

  @State list: string[] = []

  aboutToAppear() {
    this.load()
  }

  async load() {
    this.list = ["Apple", "Banana"]
  }

  build() {
    Column() {

      ForEach(this.list, item => {
        Text(item)
      })

      Button("添加")
        .onClick(() => {
          this.list.push("Orange")
        })

    }
  }

}

完整链路：

复制代码

生命周期 → 数据加载 → 状态更新 → UI 渲染

十二、最容易踩的坑

1、直接操作 DOM

ArkUI 没有 DOM。

2、手动刷新 UI

ts 复制代码

this.render()

不需要。

3、状态滥用

所有变量都用 @State。

4、数据不分层

UI 里写请求逻辑。

十三、一句话总结 ArkUI 语法

如果你只记住一句话：

ArkUI = 声明式 UI + 状态驱动 + 单向数据流

总结

ArkUI 的核心语法，可以压缩为 10 个关键词：

复制代码

@Component
@Entry
build
@State
@Prop / @Link
Event
If
ForEach
Style
Lifecycle

但真正重要的不是这些"语法点"，而是背后的模型：

复制代码

状态（State）
   ↓
UI（Component）
   ↓
用户交互（Event）
   ↓
状态更新

在 HarmonyOS 中，这套模型不仅用于：

App
PC
游戏

而是：

所有应用形态的基础