如何在List组件中分组展示不同种类的数据?-灵析社区

办公室高手

解决措施 可以通过在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[]; } 效果如图所示： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/f64f1680766d1b6cfd7bbfbe68766903.png) 参考链接 "ListItemGroup" (https://link.segmentfault.com/?enc=wfWxzppdWXzrllJNOECBAQ%3D%3D.SRvd1ZzBfU7sJxYmI0GRRikAl2QQTuCaJqNxWrpHlX24dI8YSpKnx8Z17q9hUMxfLRX3KAnAj0vCboDbbixg9VCarO7JdndVKHJbzt7%2BDtD3iw78FtKadXLfNpuvKdG4Wo2fOAL1wBqdCR5nXK9dww%3D%3D)