1# ListItemGroup 2 3该组件用来展示列表item分组,宽度默认充满[List](ts-container-list.md)组件,必须配合List组件来使用。 4 5> **说明:** 6> 7> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8## 使用说明 9当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时,不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时,不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。 10 11当前ListItemGroup内部的ListItem组件不支持编辑、框选、拖拽功能,即ListItem组件的editable、selectable属性不生效。 12 13## 子组件 14 15包含[ListItem](ts-container-listitem.md)子组件。 16 17 18## 接口 19 20ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string}) 21 22**参数:** 23 24| 参数名 | 参数类型 | 必填 | 参数描述 | 25| -------- | -------- | -------- | -------- | 26| header | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 | 27| footer | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 | 28| space | number \| string | 否 | 列表项间距。只作用于ListItem与ListItem之间,不作用于header与ListItem、footer与ListItem之间。 | 29 30## 属性 31 32| 名称 | 参数类型 | 描述 | 33| -------- | -------- | -------- | 34| divider | {<br/>strokeWidth: [Length](ts-types.md#length),<br/>color?: [ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?: [Length](ts-types.md#length),<br/>endMargin?: [Length](ts-types.md#length)<br/>} \| null | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth: 分割线的线宽。<br/>color: 分割线的颜色。<br/>startMargin: 分割线距离列表侧边起始端的距离。<br/>endMargin: 分割线距离列表侧边结束端的距离。 | 35 36> **说明:** 37> 38> ListItemGroup组件不支持设置[通用属性aspectRatio](ts-universal-attributes-layout-constraints.md)。 39> 40> ListItemGroup组件如果主轴方向是垂直方向时,设置[通用属性height](ts-universal-attributes-size.md)属性不生效。 41> 42> ListItemGroup组件如果主轴方向是水平方向时,设置[通用属性width](ts-universal-attributes-size.md)属性不生效。 43 44 45## 示例 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct ListItemGroupExample { 52 private timetable: any = [ 53 { 54 title:'星期一', 55 projects:['语文', '数学', '英语'] 56 }, 57 { 58 title:'星期二', 59 projects:['物理', '化学', '生物'] 60 }, 61 { 62 title:'星期三', 63 projects:['历史', '地理', '政治'] 64 }, 65 { 66 title:'星期四', 67 projects:['美术', '音乐', '体育'] 68 } 69 ] 70 71 @Builder itemHead(text:string) { 72 Text(text) 73 .fontSize(20) 74 .backgroundColor(0xAABBCC) 75 .width("100%") 76 .padding(10) 77 } 78 79 @Builder itemFoot(num:number) { 80 Text('共' + num + "节课") 81 .fontSize(16) 82 .backgroundColor(0xAABBCC) 83 .width("100%") 84 .padding(5) 85 } 86 87 build() { 88 Column() { 89 List({ space: 20 }) { 90 ForEach(this.timetable, (item) => { 91 ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.projects.length) }) { 92 ForEach(item.projects, (project) => { 93 ListItem() { 94 Text(project) 95 .width("100%").height(100).fontSize(20) 96 .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF) 97 } 98 }, item => item) 99 } 100 .borderRadius(20) 101 .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 102 }) 103 } 104 .width('90%') 105 .sticky(StickyStyle.Header|StickyStyle.Footer) 106 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 107 } 108} 109``` 110 111![zh-cn_image_0000001219864159](figures/zh-cn_image_listitemgroup.gif) 112