codecamp

列表item分组

该组件用来展示列表item分组,宽度默认充满List组件,必须配合List组件来使用。

说明

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

使用说明

当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时,不允许设置ListItemGroup组件的height属性。

ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时,不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。

当前ListItemGroup内部的ListItem组件不支持编辑、框选、拖拽功能,即ListItem组件的editable、selectable属性不生效。

子组件

包含ListItem子组件。

接口

ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})

参数:

参数名

参数类型

必填

参数描述

header

CustomBuilder

设置ListItemGroup头部组件。

footer

CustomBuilder

设置ListItemGroup尾部组件。

space

number | string

列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。

属性

名称

参数类型

描述

divider

{

strokeWidth: Length,

color?: ResourceColor,

startMargin?: Length,

endMargin?: Length

} | null

用于设置ListItem分割线样式,默认无分割线。

strokeWidth: 分割线的线宽。

color: 分割线的颜色。

startMargin: 分割线距离列表侧边起始端的距离。

endMargin: 分割线距离列表侧边结束端的距离。

strokeWidth, startMargin和endMargin不支持设置百分比。

说明

ListItemGroup组件不支持设置通用属性aspectRatio

ListItemGroup组件如果主轴方向是垂直方向时,设置通用属性height属性不生效。

ListItemGroup组件如果主轴方向是水平方向时,设置通用属性width属性不生效。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ListItemGroupExample {
  5. private timetable: any = [
  6. {
  7. title:'星期一',
  8. projects:['语文', '数学', '英语']
  9. },
  10. {
  11. title:'星期二',
  12. projects:['物理', '化学', '生物']
  13. },
  14. {
  15. title:'星期三',
  16. projects:['历史', '地理', '政治']
  17. },
  18. {
  19. title:'星期四',
  20. projects:['美术', '音乐', '体育']
  21. }
  22. ]
  23. @Builder itemHead(text:string) {
  24. Text(text)
  25. .fontSize(20)
  26. .backgroundColor(0xAABBCC)
  27. .width("100%")
  28. .padding(10)
  29. }
  30. @Builder itemFoot(num:number) {
  31. Text('共' + num + "节课")
  32. .fontSize(16)
  33. .backgroundColor(0xAABBCC)
  34. .width("100%")
  35. .padding(5)
  36. }
  37. build() {
  38. Column() {
  39. List({ space: 20 }) {
  40. ForEach(this.timetable, (item) => {
  41. ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.projects.length) }) {
  42. ForEach(item.projects, (project) => {
  43. ListItem() {
  44. Text(project)
  45. .width("100%").height(100).fontSize(20)
  46. .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)
  47. }
  48. }, item => item)
  49. }
  50. .borderRadius(20)
  51. .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
  52. })
  53. }
  54. .width('90%')
  55. .sticky(StickyStyle.Header|StickyStyle.Footer)
  56. }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  57. }
  58. }

列表具体item
路由容器组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }