鸿蒙系统自定义组件开发指南（九）：组件复合与组合模式探秘

在鸿蒙系统自定义组件开发中，组件复合与组合模式是一种非常重要的设计思想和开发方法。通过将多个小型、简单的组件进行组合，可以构建出功能更复杂、更强大的复合组件，从而实现更好的代码组织和复用，提高开发效率和组件的可维护性。

组件复合与组合模式的核心在于将复杂的用户界面分解为多个相对独立的、可复用的组件，然后通过组合这些组件来构建整个应用界面。每个小型组件都专注于实现某一特定的功能或展示某一特定的 UI 元素，而复合组件则负责将这些小型组件组合在一起，形成一个完整的、具有更复杂功能的 UI 模块。

// 基础组件: 头像
@Component
struct Avatar {
  imageUrl: string = '';
  size: number = 40;
  
  build() {
    Image(this.imageUrl || $r('app.media.default_avatar'))
      .width(this.size)
      .height(this.size)
      .borderRadius(this.size / 2)
  }
}

// 基础组件: 用户信息
@Component
struct UserInfo {
  username: string = '';
  description: string = '';
  
  build() {
    Column() {
      Text(this.username)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
      
      if (this.description) {
        Text(this.description)
          .fontSize(14)
          .opacity(0.7)
      }
    }
    .alignItems(HorizontalAlign.Start)
  }
}

// 复合组件: 用户列表项
@Component
struct UserListItem {
  username: string = '';
  description: string = '';
  avatarUrl: string = '';
  onItemClick?: () => void;
  
  build() {
    Row() {
      Avatar({ imageUrl: this.avatarUrl, size: 50 })
        .margin({ right: 15 })
      
      UserInfo({ 
        username: this.username, 
        description: this.description 
      })
      .layoutWeight(1)
      
      Image($r('app.media.icon_arrow_right'))
        .width(20)
        .height(20)
        .opacity(0.5)
    }
    .width('100%')
    .padding(15)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .onClick(() => {
      if (this.onItemClick) {
        this.onItemClick();
      }
    })
  }
}

// 使用复合组件
@Entry
@Component
struct ContactsPage {
  private contacts: Array<{ id: string, name: string, avatar: string, role: string }> = [
    { id: '1', name: '张三', avatar: '/assets/avatars/1.png', role: '产品经理' },
    { id: '2', name: '李四', avatar: '/assets/avatars/2.png', role: '前端开发' },
    { id: '3', name: '王五', avatar: '/assets/avatars/3.png', role: '后端开发' }
  ];
  
  build() {
    Column({ space: 10 }) {
      Text('联系人列表')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })
      
      List() {
        ForEach(this.contacts, (contact) => {
          ListItem() {
            UserListItem({
              username: contact.name,
              description: contact.role,
              avatarUrl: contact.avatar,
              onItemClick: () => {
                console.info(`点击了联系人: ${contact.name}`);
                // 可以在这里导航到详情页等
              }
            })
          }
        })
      }
      .width('100%')
      .divider({ strokeWidth: 1, color: '#EEEEEE' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
    .padding(15)
  }
}

在上述代码中，首先定义了两个基础组件：Avatar（头像）和 UserInfo（用户信息）。Avatar 组件用于展示用户的头像图片，具有圆形的样式；UserInfo 组件用于展示用户的姓名和描述信息。然后，通过组合这两个基础组件，创建了一个复合组件 UserListItem（用户列表项），它将头像、用户信息以及一个箭头图标组合在一起，形成一个完整的用户列表项组件，并且添加了点击事件处理，使得用户可以点击列表项进行相应的操作。最后，在 ContactsPage 页面中使用 UserListItem 复合组件来展示联系人列表，通过传入不同的联系人数据，实现列表项的动态展示。

组件复合与组合模式的优势在于能够提高代码的复用性和可维护性。每个基础组件都可以独立地开发、测试和复用，而复合组件则通过组合这些基础组件来实现更复杂的功能。当需要对某一部分功能进行修改或优化时，只需修改相应的基础组件或复合组件即可，无需修改整个应用界面的代码，降低了代码的维护成本。

此外，组件复合与组合模式还能够提高开发效率。通过构建一个丰富的组件库，我们可以在不同的项目中快速地组合和复用这些组件，减少重复开发的工作量。例如，一个通用的表单组件库可以包含各种输入框、选择框、按钮等基础组件，以及由这些基础组件组合而成的复杂表单组件，如登录表单、注册表单、订单表单等。在开发新的应用时，可以直接使用这些现成的组件，快速地搭建出符合需求的界面。

在实际开发过程中，合理地运用组件复合与组合模式需要遵循一些原则。首先，要确保每个组件的职责清晰、单一，避免组件功能过于复杂或臃肿。其次，要合理地规划组件的组合方式和层级结构，避免组件嵌套过深导致代码难以理解和维护。最后，要注意组件之间的通信和数据流动，确保复合组件能够正确地协调各个基础组件的行为和状态。