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

网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。 公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。 微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。 最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录引言一、ArkUI 的本质状态驱动 UI二、核心语法一Component定义组件页面入口三、核心语法二buildUI 描述声明式 UI嵌套结构四、核心语法三State定义状态修改状态示例五、核心语法四数据传递Prop / Link1、Prop单向传递子组件父组件2、Link双向绑定子组件父组件六、核心语法五事件Event点击事件输入事件七、核心语法六条件渲染八、核心语法七列表渲染九、核心语法八样式与布局常用布局样式链式写法十、核心语法九生命周期页面加载页面销毁十一、核心语法十状态 UI 的完整链路示例十二、最容易踩的坑1、直接操作 DOM2、手动刷新 UI3、状态滥用4、数据不分层十三、一句话总结 ArkUI 语法总结引言很多人刚接触 HarmonyOS 的 ArkUI 时会有一种感觉“语法不多但总感觉写不对。”问题不在于 API而在于你还没理解 ArkUI 的“核心语法模型”这篇文章我们不做零散讲解而是用一条主线把 ArkUI 的核心语法一次讲清楚状态State → UIComponent → 数据流Data Flow一、ArkUI 的本质状态驱动 UI先看一段最简单代码EntryComponentstruct Counter{Statecount:number0build(){Column(){Text(${this.count})Button(1).onClick((){this.count})}}}这里发生了什么count 变化 → UI 自动更新核心原则你不需要“刷新 UI”只需要修改状态二、核心语法一Component定义组件Componentstruct MyView{build(){Text(Hello ArkUI)}}每一个 UI 单元本质都是组件。页面入口EntryComponentstruct MainPage{build(){Text(首页)}}Entry表示应用入口。三、核心语法二buildUI 描述声明式 UIbuild(){Column(){Text(标题)Button(按钮)}}重点你描述 UI 是什么而不是怎么画出来嵌套结构Column(){Row(){Text(左)Text(右)}}类似“树结构”。四、核心语法三State定义状态Statecount:number0修改状态this.count自动触发 UI 更新。示例Text(${this.count})状态绑定 UI。五、核心语法四数据传递Prop / Link1、Prop单向传递子组件Componentstruct Child{Proptitle:stringbuild(){Text(this.title)}}父组件Child({title:Hello})特点只读不可修改2、Link双向绑定子组件Componentstruct Child{Linkcount:numberbuild(){Button(1).onClick(()this.count)}}父组件Statecount:number0Child({count:$count})特点子组件可以修改父状态六、核心语法五事件Event点击事件Button(点击).onClick((){console.log(clicked)})输入事件TextInput().onChange((value){this.textvalue})本质事件 → 修改状态七、核心语法六条件渲染if(this.count0){Text(大于 0)}else{Text(等于 0)}UI 随状态变化。八、核心语法七列表渲染Statelist:string[][A,B,C]ForEach(this.list,(item:string){Text(item)})用于渲染集合数据。九、核心语法八样式与布局常用布局Column()Row()Stack()样式链式写法Text(Hello).fontSize(20).color(Color.Red).margin(10)特点链式调用Fluent API十、核心语法九生命周期页面加载aboutToAppear(){this.loadData()}页面销毁aboutToDisappear(){}用于处理请求数据初始化十一、核心语法十状态 UI 的完整链路我们把所有语法串起来示例EntryComponentstruct Demo{Statelist:string[][]aboutToAppear(){this.load()}asyncload(){this.list[Apple,Banana]}build(){Column(){ForEach(this.list,item{Text(item)})Button(添加).onClick((){this.list.push(Orange)})}}}完整链路生命周期 → 数据加载 → 状态更新 → UI 渲染十二、最容易踩的坑1、直接操作 DOMArkUI 没有 DOM。2、手动刷新 UIthis.render()不需要。3、状态滥用所有变量都用 State。4、数据不分层UI 里写请求逻辑。十三、一句话总结 ArkUI 语法如果你只记住一句话ArkUI 声明式 UI 状态驱动 单向数据流总结ArkUI 的核心语法可以压缩为 10 个关键词Component Entry build State Prop / Link Event If ForEach Style Lifecycle但真正重要的不是这些“语法点”而是背后的模型状态State ↓ UIComponent ↓ 用户交互Event ↓ 状态更新在 HarmonyOS 中这套模型不仅用于AppPC游戏而是所有应用形态的基础