如何在List组件中分组展示不同种类的数据

数据包含多个种类（例如标题、标题对应的子类等）的子数据，如何根据数据种类为ListItem设置不同的样式。

HarmonyOS

pennyma

2024-01-20 11:27:18

浏览

回答 1

待解决

回答 1

按赞同

按时间

liuxusy

可以通过在List组件中使用ListItemGroup组件来展示Listitem分组，可以单独设置ListItemGroup中的header参数自定义每组的头部组件样式。

代码示例

// xxx.ets 
@Entry 
@Component 
struct ListItemGroupExample { 
  private timetable: TimeTable[] = [ 
    { 
      title: '星期一', 
      projects: ['语文', '数学', '英语'] 
    }, 
    { 
      title: '星期二', 
      projects: ['物理', '化学', '生物'] 
    }, 
    { 
      title: '星期三', 
      projects: ['历史', '地理', '政治'] 
    }, 
    { 
      title: '星期四', 
      projects: ['美术', '音乐', '体育'] 
    } 
  ] 
 
  @Builder 
  itemHead(text: string) { 
    Text(text) 
      .fontSize(20) 
      .backgroundColor(0xAABBCC) 
      .width('100%') 
      .padding(10) 
  } 
 
  @Builder 
  itemFoot(num: number) { 
    Text('共' + num + '节课') 
      .fontSize(16) 
      .backgroundColor(0xAABBCC) 
      .width('100%') 
      .padding(5) 
  } 
 
  build() { 
    Column() { 
      List({ space: 20 }) { 
        ForEach(this.timetable, (item: TimeTable) => { 
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) { 
            ForEach(item.projects, (project: string) => { 
              ListItem() { 
                Text(project) 
                  .width('100%') 
                  .height(100) 
                  .fontSize(20) 
                  .textAlign(TextAlign.Center) 
                  .backgroundColor(0xFFFFFF) 
              } 
            }, (item: string) => item) 
          } 
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 
        }) 
      } 
      .width('90%') 
      .height('100%') 
      .sticky(StickyStyle.Header | StickyStyle.Footer) 
      .scrollBar(BarState.Off) 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 
  } 
} 
 
interface TimeTable { 
  title: string; 
  projects: string[]; 
}

效果如图所示：