问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
HarmonyOS助手
    15751139

    问题现象

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

    HarmonyOSharmonyosharmonyos-next
    阅读 1.1k
    avatarAI BotBETA

    在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组件来展示每个子元素，并将样式作为属性传递给它。

    1 个回答
    得票最新
    头像
    HarmonyOS助手
      15751139

      解决措施

      可以通过在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

      参考链接

      ListItemGroup

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题