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

Question

问题现象

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

Answer 1

解决措施

可以通过在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[]; }

效果如图所示：

参考链接

ListItemGroup

Answer 2

在React中，你可以使用map函数来遍历列表，并为每个元素创建相应的组件。为了根据数据种类为ListItem设置不同的样式，你可以使用条件语句（例如if或switch）来检查每个元素的种类，并为每种情况应用不同的样式。

以下是一个示例代码，展示了如何根据数据种类为ListItem设置不同的样式：

import React from 'react';const data = [  { type: '标题1', children: ['子数据1', '子数据2'] },  { type: '标题2', children: ['子数据3', '子数据4'] },  // 其他数据...];const ListComponent = () => {  return (    <div>      {data.map((item) => (        <div key={item.type}>          <h1>{item.type}</h1>          {item.children.map((child) => (            <div key={child}>              <ListItem style={item.type === '标题1' ? styles.title1 : styles.title2}>                {child}              </ListItem>            </div>          ))}        </div>      ))}    </div>  );};const ListItem = ({ children, style }) => (  <div style={style}>{children}</div>);const styles = {  title1: {    color: 'blue',    fontSize: '20px',  },  title2: {    color: 'red',    fontSize: '18px',  },};

在上面的代码中，我们首先定义了一个包含不同种类数据的数组data。然后，我们使用map函数来遍历这个数组，并为每个元素创建一个<div>元素。对于每个<div>元素，我们根据元素的类型设置其子元素的样式。这里使用了条件语句if来检查每个元素的类型，并应用相应的样式。如果元素的类型是'标题1'，则使用styles.title1样式；否则，使用styles.title2样式。最后，我们使用ListItem组件来展示每个子元素，并将样式作为属性传递给它。