鸿蒙next List - ListItemGroup 分组

class Contact {
  key: string = util.generateRandomUUID(true);
  name: string;
  icon: Resource;

  constructor(name: string, icon: Resource) {
    this.name = name;
    this.icon = icon;
  }
}

@Entry
@Component
struct SimpleContacts {
  private contacts: Array<object> = [
    new Contact('小明1', $r("app.media.car_icon2")),
    new Contact('小红2', $r("app.media.car_icon2")),
    new Contact('小明3', $r("app.media.car_icon2")),
    new Contact('小红4', $r("app.media.car_icon2")),
    new Contact('小明5', $r("app.media.car_icon2")),
    new Contact('小红6', $r("app.media.car_icon2")),
    new Contact('小明7', $r("app.media.car_icon2")),
    new Contact('小红8', $r("app.media.car_icon2")),
  ]

  @Builder itemHead(text: string) {
    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
    Text(text)
      .fontSize(20)
      .backgroundColor('#fff1f3f5')
      .width('100%')
      .padding(5)
  }


  build() {
    List() {
      ListItemGroup({header:this.itemHead("header1")}){
        ForEach(this.contacts, (item: Contact) => {
          ListItem() {
            Row() {
              Image(item.icon)
                .width(40)
                .height(40)
                .margin(10)
              Text(item.name).fontSize(20)
            }
            .width('100%')
            .justifyContent(FlexAlign.Start)
          }
        }, (item: Contact) => JSON.stringify(item))
      }
      ListItemGroup({header:this.itemHead("header2")}){
        ForEach(this.contacts, (item: Contact) => {
          ListItem() {
            Row() {
              Image(item.icon)
                .width(40)
                .height(40)
                .margin(10)
              Text(item.name).fontSize(20)
            }
            .width('100%')
            .justifyContent(FlexAlign.Start)
          }
        }, (item: Contact) => JSON.stringify(item))
      }
    }
    .width('100%')
    .sticky(StickyStyle.Footer)
  }
}

通过ListItemGroup 实现分组效果

.sticky(StickyStyle.Footer)可以实现 header/footer 固定在顶部/底部 ListItemGroup 除了header 还有 footer 对应的 StickyStyle.Header 与 StickStyle.Footer