HCCDA 鸿蒙应用实验概述

HCCDA（HarmonyOS Certified Comprehensive Development Associate）是华为鸿蒙应用开发的认证体系之一，其实验内容涵盖鸿蒙基础组件使用、属性配置及样式设计。以下针对基础组件属性与样式配置进行拆解。

---

基础组件属性配置

鸿蒙应用开发中，组件属性通过xxx.ets文件中的struct结构体定义，常用基础组件包括Text、Button、Image等。属性配置分为静态属性和动态绑定两种方式。

静态属性示例

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello HarmonyOS')
        .fontSize(20)           // 字体大小
        .fontColor('#FF0000')   // 字体颜色
        .fontWeight(700)        // 字体粗细
    }
  }
}

动态属性绑定
通过@State装饰器实现数据与UI的联动：

@Entry
@Component
struct Index {
  @State count: number = 0

  build() {
    Column() {
      Button(`Click ${this.count}`)
        .onClick(() => { this.count++ })
        .width(100)
        .height(40)
    }
  }
}

---

组件样式设计

鸿蒙样式设计支持链式调用和全局样式定义，灵活适配不同场景。

链式样式
直接在组件后追加样式方法：

Text('Hello')
  .fontSize(24)
  .margin({ top: 10, bottom: 20 })
  .backgroundColor('#F0F0F0')

全局样式扩展
通过@Extend装饰器复用样式：

@Extend(Text) function boldText() {
  .fontWeight(700)
  .fontColor('#000000')
}

@Entry
@Component
struct Example {
  build() {
    Column() {
      Text('Bold Text').boldText()
    }
  }
}

---

常用属性分类

1. 布局属性

   • width/height：宽高设置
   • margin/padding：外边距与内边距
   • align：对齐方式（如Alignment.Top）

2. 文本属性

   • fontSize/fontColor：字体大小与颜色
   • textAlign：文本对齐（如TextAlign.Center）

3. 交互属性

   • onClick：点击事件
   • enabled：启用/禁用状态

---

样式适配与响应式

鸿蒙支持通过媒体查询（@ohos.mediaquery）实现多设备适配：

import mediaquery from '@ohos.mediaquery'

let smQuery = mediaquery.matchMedia('(max-width: 320px)')
smQuery.on('change', (result) => {
  if (result.matches) {
    // 小屏设备样式调整
  }
})

---

注意事项

• 避免过度使用链式调用，复杂样式建议拆分为独立函数。
• 动态属性需配合状态管理装饰器（如@State、@Prop）。
• 全局样式命名需语义化，避免冲突。

通过上述方法，可高效完成鸿蒙应用的基础组件配置与样式设计。