第十三系列：鸿蒙特性与最佳实践

zzd1234566

225人浏览 · 2026-07-19 00:33:56

zzd1234566 · 2026-07-19 00:33:56 发布

页面预览

前言

在前 12 个系列中，我们通过"海风日记"的完整源码，深入讲解了 ArkUI 的各种组件和 API。本系列将总结和提炼鸿蒙应用开发中的最佳实践，包括状态管理、组件化设计、颜色规范、日志系统等核心主题。

本文是第十三系列的开篇，将介绍 @State 响应式编程的核心机制。

一、@State 响应式编程

@Component
export struct HomeTab {
  @State isGridView: boolean = true
  @State diaryList: DiaryEntry[] = MOCK_DIARIES

  build() {
    if (this.isGridView) {
      Grid() { ... }
    } else {
      List() { ... }
    }
  }
}

二、@Link 父子组件双向绑定

@Component
export struct MoodSelector {
  @Link selectedMood: number
  @Link selectedWeather: number
}

三、颜色常量模块化设计

export const COLOR_PRIMARY = '#F5A623'
export const COLOR_BG_PAGE = '#FAFAF7'
export const COLOR_TEXT_MAIN = '#2D2926'

四、Dimension 尺寸规范

export const PAGE_PADDING = 16
export const CARD_RADIUS = 16
export const FONT_BODY = 16

五、专有名词对照表

鸿蒙/ArkTS 术语	说明
`@State`	组件内部状态，变化触发 UI 重渲染
`@Link`	父子组件双向绑定
`@Builder`	自定义构建函数
`@BuilderParam`	组件插槽
`UIAbility`	应用入口能力
`WindowStage`	窗口阶段管理
`SymbolGlyph`	系统图标组件
`hilog`	日志输出 API
`router`	页面路由
`ForEach`	数据驱动渲染
`LinearGradient`	线性渐变
`RadialGradient`	径向渐变

六、项目架构图总结

┌─────────────────────────────────────┐
│          EntryAbility               │
│         (UIAbility 入口)             │
├─────────────────────────────────────┤
│              Index                  │
│         (Tabs 导航框架)              │
├──────┬──────┬──────┬──────┬────────┤
│首页  │ 日历  │ 写日记│ 回顾  │  我的  │
│Home  │Calend│Write │Review│  Mine  │
│Tab   │arTab │Diary │Tab   │  Tab   │
├──────┴──────┴──────┴──────┴────────┤
│        通用组件层                    │
│  DiaryCard  MoodSelector  WaveHeader  │
├─────────────────────────────────────┤
│         数据模型层                   │
│        DiaryModel  Constants        │
├─────────────────────────────────────┤
│          配置层                      │
│  module.json5  main_pages.json     │
└─────────────────────────────────────┘