一、前言

随着 HarmonyOS 生态的不断完善，ArkUI 已成为打造高性能、跨设备界面的首选方案。通过 ArkUI 提供的声明式组件、灵活的布局能力和统一的状态管理，开发者可以快速构建既美观又高效的应用。本文将从开发环境、核心概念、自定义组件和性能优化等方面，带你系统地掌握 ArkUI 开发要点。

二、开发环境搭建

1. 安装 DevEco Studio
   访问 OpenHarmony 官网，下载并安装最新版本的 DevEco Studio。

2. 创建 HarmonyOS 项目
   在 DevEco Studio 中选择 Empty Ability 模板，填入应用信息后点击 Finish。

3. 配置 ArkUI 依赖
   确保 entry 目录下的 package.json 中包含如下依赖

   {
     "dependencies": {
       "@ohos.arkui": "latest",
       "@ohos.ability.featureAbility": "latest"
     }
   }
   

4. 启动模拟器或真机调试
   在 DevEco Studio 中运行项目，体验 ArkUI 默认的 Hello World 示例。

三、ArkUI 核心概念

3.1 声明式组件

组件是界面最小单元，每个组件通过 @Component struct 定义，并实现 build() 方法返回布局树。框架会自动侦测 @State 和 @Link 数据变化，重绘对应组件。

@Component
struct Counter {
  @State count: number = 0

  build() {
    Column() {
      Text("当前值：" + this.count).fontSize(24)
      Button("自增")
        .onClick(() => this.count++)
    }
    .padding(20)
  }
}

3.2 布局系统

ArkUI 提供多种布局组件

• Column / Row
  主轴方向排列子组件，支持 flex、justifyContent、alignItems
• Flex
  更灵活的多方向布局
• Grid / RelativeContainer
  网格与相对定位，实现复杂对齐场景

Row({ space: 10, justifyContent: FlexAlign.Center }) {
  Image("icon1.png").size(50)
  Text("示例文本").fontSize(18)
}

3.3 状态管理

• @State
  驱动当前组件重建
• @Link
  绑定父组件或模块的外部数据
• @Watch
  监听某个 @State 或 @Link 变化，触发副作用

@Component
struct Toggle {
  @State on: boolean = false

  build() {
    Switch()
      .checked(this.on)
      .onChange(() => this.on = !this.on)
  }
}

四、自定义组件进阶

4.1 组合现有组件

将常用 UI 模式封装为可复用组件，减轻页面负担。

@Component export struct TitleBar {
  title: string
  onBack?: () => void

  build() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Button("<").onClick(() => this.onBack?.call(this))
      Text(this.title).fontSize(20)
      Blank() // 占位保持居中
    }
    .height(56)
    .backgroundColor("#317AFF")
  }
}

4.2 插槽机制

使用 @BuilderParam 声明占位函数，可将任意子组件注入自定义组件内部。

@Component export struct Card {
  @BuilderParam content: () => void

  build() {
    Column() {
      Text("卡片标题").fontSize(18)
      this.content()    // 渲染外部传入的内容
    }
    .backgroundColor("#ffffff")
    .borderRadius(8)
    .padding(16)
  }
}

五、性能优化与实践

1. 避免在 build() 中执行复杂逻辑
   将耗时计算放在 aboutToAppear() 或外部服务中
2. 列表虚拟化
   List 组件配合 cachedCount、onScrollFrameBegin 控制预加载
3. 减少匿名函数和临时对象
   将样式与回调提取为静态常量或成员方法
4. 及时清理定时器与监听
   在 aboutToDisappear() 中调用 clearInterval、off()

六、总结

ArkUI 的声明式编程模型与强大组件体系，使 HarmonyOS 多端开发更为高效。通过合理拆分组件、灵活使用插槽、自定义扩展和性能调优，您可以构建出既美观又流畅的原生应用。