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

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

HarmonyOS
2024-01-20 11:27:18
浏览
收藏 0
回答 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[]; 
}

效果如图所示:

参考链接

ListItemGroup

分享
微博
QQ
微信
回复
2024-01-21 00:35:58
相关问题
Scroll组件展示位置如何调整
31浏览 • 1回复 待解决
如何设置组件不同状态下样式
129浏览 • 1回复 待解决
js如何list组件设置为横向
1811浏览 • 1回复 待解决
List组件如何设置多列
132浏览 • 1回复 待解决
List组件如何设置两端渐变效果
89浏览 • 1回复 待解决
如何获取List组件滚动条滚动距离
37浏览 • 1回复 待解决
何设置组件不同状态下样式
65浏览 • 1回复 待解决
如何创建OceanBase表分组
1710浏览 • 1回复 待解决
List组件initialIndex属性设置不生效
64浏览 • 1回复 待解决
mysql 不同数据同步
650浏览 • 1回复 待解决
websocket结合php做数据实时展示页面
859浏览 • 1回复 待解决