第4章：UI组件基础

1. 组件概述

1.1 什么是ArkTS UI组件

ArkTS UI组件是构建用户界面的基础单元，遵循声明式开发范式。每个组件对应一个可视化的界面元素（如按钮、文本框等），通过组合和嵌套组件可以快速构建复杂的用户界面。ArkTS组件具有以下核心特点：

  • 声明式语法：使用简洁的DSL描述UI结构和行为
  • 数据驱动：通过状态变化自动更新视图
  • 类型安全：基于TypeScript的静态类型检查
  • 高性能渲染：优化的差异更新机制

1.2 组件分类体系

ArkTS组件主要分为两大类：

基础组件

组件类型示例功能描述
显示组件Text, Image内容展示
交互组件Button, TextInput用户输入处理
容器组件Column, Row子组件布局

高级组件

// 示例：组合组件
@Component
struct Card {
  @Prop title: string
  
  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
      Divider()
      // 插槽内容
      Slot()
    }
  }
}

1.3 组件生命周期

ArkTS组件具有明确的生命周期阶段：

  1. 初始化阶段：

    • aboutToAppear：组件创建时触发
    • build()：执行UI构建

  2. 更新阶段：

    • aboutToUpdate：状态变化前触发
    • build()：重新渲染

  3. 销毁阶段：

    • aboutToDisappear：组件销毁前触发

1.4 组件开发最佳实践

  1. 单一职责原则：每个组件应只关注特定功能
  2. 合理拆分：复杂组件应拆分为多个子组件
  3. 状态管理：
    @State count: number = 0  // 组件私有状态
@Link value: string       // 父子组件双向绑定
  4. 样式隔离：使用@Styles装饰器定义可复用样式

1.5 组件与预览器交互

在DevEco Studio中可以通过：

# 快速预览组件
$ hdc shell snapshot_demo -component com.example.MyComponent

关键概念：组件是ArkTS UI开发的原子单位，理解其生命周期和数据流动机制是构建高质量应用的基础。

Last Updated::