鸿蒙应用开发第一步：从空工程到状态驱动
HarmonyOS NEXT 搭建了一套以 Kit 为维度的开放能力体系，涵盖应用框架、系统、媒体、图形、应用服务和 AI 六大领域。其中 Ability Kit 管程序生命周期，ArkUI 管 UI 渲染，Network Kit 管网络通信——开发者不需要从底层拼装，选对 Kit 就能快速起步。
今天我们从官方文档的视角出发，走一遍 HarmonyOS 应用开发的核心路径：理解 Stage 模型工程结构，用 ArkTS 声明式语法写页面，通过 @State 实现状态驱动 UI 刷新。
Stage 模型与工程结构
DevEco Studio 创建的 "Empty Ability" 模板会生成一套标准目录：
•AppScope/app.json5：全局配置，定义 bundleName、应用图标和名称。•entry/src/main/ets/pages/Index.ets：默认首页，UI 代码写在这里。•entry/src/main/ets/entryability/：入口 Ability，系统启动时加载 pages/Index.ets。•entry/src/main/resources/：资源文件，图片、字符串、颜色统一管理。这套结构就是 Stage 模型的核心：Ability 负责生命周期调度，Pages 负责页面渲染，Resources 负责资源隔离。三者各司其职，代码不会挤在一个文件里。
@State：状态驱动 UI 的关键
ArkTS 声明式 UI 的核心理念是「数据变，UI 自动变」。@State 装饰器标记的变量一旦被修改，框架会自动重新渲染引用了该变量的 UI 组件。开发者不需要手动操作 DOM，只需关注数据本身。
来看一个经典示例。
Demo 1：文本切换
点击按钮，文字在 "Hello World" 和 "Hello HarmonyOS" 之间切换。这是理解 @State 最直观的入口。
"color:#6a9955">#6a9955">// Index.ets"color:#6a9955">#c586c0">@Entry"color:#6a9955">#c586c0">@Componentstruct Index {"color:#6a9955">#c586c0">@State message: string = 'Hello World'; build() { Column() { Text(this.message) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor('"color:#6a9955">#333333') .margin({ bottom: 24 }) Button('点击切换') .width('80%') .height(48) .fontSize(16) .fontColor('"color:#6a9955">#FFFFFF') .backgroundColor('"color:#6a9955">#0A59F7') .borderRadius(24) .onClick(() => {if (this.message === 'Hello World') {this.message = 'Hello HarmonyOS'; } else {this.message = 'Hello World'; } }) } .width('100%') .height('100%') .justifyContent(ForeignConst.Center) .alignItems(HorizontalAlign.Center) }}
当 onClick 触发时，this.message 被重新赋值，@State 监听到变化，自动触发 Text 组件重新渲染。整个流程不需要手动调用 setText 或 invalidate。
Demo 2：模拟实时数据卡片
结合 Network Kit 的思路，我们用定时器模拟网络请求，展示数据获取后 UI 自动更新的效果。这在天气、股票、消息列表等场景中非常常见。
"color:#6a9955">#6a9955">// WeatherCard.ets"color:#6a9955">#c586c0">@Entry"color:#6a9955">#c586c0">@Componentstruct WeatherCard {"color:#6a9955">#c586c0">@State city: string = '加载中...';"color:#6a9955">#c586c0">@State temperature: string = '--';"color:#6a9955">#c586c0">@State weather: string = '--';"color:#6a9955">#c586c0">@State isRefreshing: boolean = false; aboutToAppear() {this.fetchWeatherData(); } fetchWeatherData() {this.isRefreshing = true;"color:#6a9955">#6a9955">// 模拟网络请求延迟 setTimeout(() => {this.city = '深圳';this.temperature = '31°C';this.weather = '晴转多云';this.isRefreshing = false; }, 2000); } build() { Column({ space: 16 }) {"color:#6a9955">#6a9955">// 城市名称 Text(this.city) .fontSize(24) .fontWeight(FontWeight.Bold) .fontColor('"color:#6a9955">#1A1A1A')"color:#6a9955">#6a9955">// 温度大字 Text(this.temperature) .fontSize(56) .fontWeight(FontWeight.Bold) .fontColor('"color:#6a9955">#0A59F7')"color:#6a9955">#6a9955">// 天气描述 Text(this.weather) .fontSize(20) .fontColor('"color:#6a9955">#666666')"color:#6a9955">#6a9955">// 刷新按钮 Button(this.isRefreshing ? '刷新中...' : '刷新数据') .width('60%') .height(44) .fontSize(16) .fontColor('"color:#6a9955">#FFFFFF') .backgroundColor(this.isRefreshing ? '"color:#6a9955">#999999' : '#0A59F7') .borderRadius(22) .enabled(!this.isRefreshing) .onClick(() => {this.fetchWeatherData(); }) } .width('100%') .height('100%') .justifyContent(ForeignConst.Center) .alignItems(HorizontalAlign.Center) .backgroundColor('"color:#6a9955">#F5F5F5') }}
页面首次加载时 aboutToAppear 生命周期触发数据请求，2 秒后模拟数据返回，三个 @State 变量同时更新，UI 瞬间从「加载中」切换为完整天气信息。点击「刷新数据」按钮会重新触发同一流程，按钮在刷新期间自动禁用并显示「刷新中...」。
应用场景
@State 状态驱动模式适用于：
•表单交互：输入框内容联动验证提示、提交按钮启用/禁用•实时数据展示：天气、股票、消息推送等需要定时更新的卡片当状态需要在多个组件间共享时，可以进一步使用 @Prop（父子单向传递）、@Link（双向同步）或 AppStorage（全局状态）来扩展。
小结
HarmonyOS 应用开发的核心路径可以概括为三步：用 Stage 模型组织工程结构，用 ArkTS 声明式语法描述 UI，用 @State 装饰器驱动数据到视图的自动同步。掌握了这套「数据变 → UI 变」的心智模型，再加上 DevEco Studio 的实时预览能力（Ctrl+S 保存即刷新），迭代效率会非常高。
下一步可以尝试接入真实的 Network Kit 发起 HTTP 请求，或者用 @Builder 封装可复用的 UI 片段，让代码结构更加清晰。
