目录

案例介绍

本篇文章将介绍如何实现联系人分组列表的基础UI组件。我们将使用ListItemGroup组件创建分组列表的基本布局，包括分组头部和列表项的设计。

代码实现

@Entry
@Component
struct ContactListExample {
  // 模拟联系人数据
  private contacts: Array<Contact> = [
    new Contact(1, '张三', '13800138001', $r('app.media.avatar1')),
    new Contact(2, '李四', '13800138002', $r('app.media.avatar2')),
    new Contact(3, '王五', '13800138003', $r('app.media.avatar3'))
  ];
  
  // 按字母分组的联系人数据
  private contactGroups: Array<ContactGroup> = [];
  
  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('联系人')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button('添加', { type: ButtonType.Capsule, stateEffect: true })
          .height(36)
          .fontSize(14)
      }
      .width('100%')
      .padding(16)
      
      // 联系人列表
      List() {
        ForEach(this.contactGroups, (group: ContactGroup) => {
          ListItemGroup({
            header: this.renderGroupHeader(group.letter),
            footer: this.renderGroupFooter(group.contacts.length),
            divider: { strokeWidth: 1, color: '#E1E3E5', startMargin: 72, endMargin: 16 }
          }) {
            ForEach(group.contacts, (contact: Contact) => {
              ListItem() {
                this.renderContactItem(contact)
              }
            })
          }
        })
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#F5F5F5')
    }
    .width('100%')
    .height('100%')
  }
  
  // 渲染分组头部
  @Builder
  renderGroupHeader(letter: string) {
    Text(letter)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .backgroundColor('#EAEAEA')
      .width('100%')
      .padding({ left: 16, right: 16, top: 8, bottom: 8 })
  }
  
  // 渲染分组尾部
  @Builder
  renderGroupFooter(count: number) {
    Text(`共${count}个联系人`)
      .fontSize(14)
      .fontColor('#999999')
      .width('100%')
      .textAlign(TextAlign.Center)
      .padding(8)
  }
}

代码详解

基础布局结构

1. 整体布局：

   • 使用Column作为根容器
   • 顶部标题栏和联系人列表两个主要部分

2. 顶部标题栏：

   • Row布局包含标题文本和添加按钮
   • 使用Blank()组件实现两端对齐
   • 设置合适的padding和字体样式

ListItemGroup实现

1. List组件配置：

   • 使用layoutWeight(1)占据剩余空间
   • 设置背景色和宽度

2. ListItemGroup组件：

   • header: 使用renderGroupHeader构建器显示分组字母
   • footer: 使用renderGroupFooter构建器显示联系人数量
   • divider: 设置分割线样式

自定义构建器

1. renderGroupHeader：

   • 显示分组字母
   • 设置字体大小和粗细
   • 添加背景色和内边距

2. renderGroupFooter：

   • 显示联系人数量
   • 居中对齐
   • 设置字体颜色和大小

总结

本篇文章展示了如何使用HarmonyOS的UI组件构建联系人分组列表的基础界面。通过合理使用ListItemGroup组件和自定义构建器，我们实现了一个结构清晰的分组列表界面。这种实现方式为后续添加更多功能提供了良好的基础。