1# list-item-group 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6<[list](../arkui-js/js-components-container-list.md)>的子组件，用来展示分组，宽度默认充满list组件。 7 8 9- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 10 11- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 12 13## 权限列表 14 15无 16 17 18## 子组件 19 20仅支持<[list-item](../arkui-js/js-components-container-list-item.md)>。 21 22 23## 属性 24 25除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 26 27| 名称 | 类型 | 默认值 | 必填 | 描述 | 28| ---- | ------ | ------- | ---- | ---------------------------------------- | 29| type | string | default | 否 | list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。 | 30 31> **说明：** 32> 33> - 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 34 35 36## 样式 37 38除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 39 40| 名称 | 类型 | 默认值 | 必填 | 描述 | 41| --------------- | ------ | ---------- | ---- | ---------------------------------------- | 42| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>- column：垂直方向从上到下<br/>- row：水平方向从左到右 | 43| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>- flex-start：项目位于容器的开头。<br/>- flex-end：项目位于容器的结尾。<br/>- center：项目位于容器的中心。<br/>- space-between：项目位于各行之间留有空白的容器内。<br/>- space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>- space-evenly<sup>5+</sup>: 均匀排列每个元素，每个元素之间的间隔相等。 | 44 45 46## 事件 47 48除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 49 50| 名称 | 参数 | 描述 | 51| ------------- | ---------------------------------- | ---------------------------------------- | 52| groupclick | { groupid: string } | group点击事件。<br/>groupid：被点击的group的id。 | 53| groupcollapse | { groupid: string } | group收拢事件。<br/>groupid：收拢的group的id。<br/>当不输入参数或者groupid为空时收拢所有分组。 | 54| groupexpand | { groupid: string } | group展开事件。<br/>groupid：展开的group的id。<br/>当不输入参数或者groupid为空时展开所有分组。 | 55 56 57## 方法 58 59支持[通用方法](../arkui-js/js-components-common-methods.md)。 60 61 62## 示例 63 64```html 65<!-- xxx.hml --> 66<div class="doc-page"> 67 <list style="width: 100%;" id="mylist"> 68 <list-item class="top-list-item" clickeffect="false"> 69 <div class="item-div"> 70 <div class="item-child"> 71 <button type="capsule" value="Collapse first" onclick="collapseOne"></button> 72 <button type="capsule" value="Expand first" onclick="expandOne"></button> 73 </div> 74 <div class="item-child"> 75 <button type="capsule" value="Collapse all" onclick="collapseAll"></button> 76 <button type="capsule" value="Expand all" onclick="expandAll"></button> 77 </div> 78 </div> 79 </list-item> 80 <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand"> 81 <list-item type="item" style="background-color:#FFF0F5;height:95px;"> 82 <div class="item-group-child"> 83 <text>One---{{listgroup.value}}</text> 84 </div> 85 </list-item> 86 <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true"> 87 <div class="item-group-child"> 88 <text>Primary---{{listgroup.value}}</text> 89 </div> 90 </list-item> 91 </list-item-group> 92 </list> 93</div> 94``` 95 96```css 97/* xxx.css */ 98.doc-page { 99 flex-direction: column; 100} 101.top-list-item { 102 width:100%; 103 background-color:#D4F2E7; 104} 105.item-div { 106 flex-direction:column; 107 align-items:center; 108 justify-content:space-around; 109 height:240px; 110} 111.item-child { 112 width:100%; 113 height:60px; 114 justify-content:space-around; 115 align-items:center; 116} 117.item-group-child { 118 justify-content: center; 119 align-items: center; 120 width:100%; 121} 122``` 123 124```js 125// xxx.js 126import promptAction from '@ohos.promptAction'; 127export default { 128 data: { 129 direction: 'column', 130 list: [], 131 listAdd: [] 132 }, 133 onInit() { 134 this.list = [] 135 this.listAdd = [] 136 for (var i = 1; i <= 3; i++) { 137 var dataItem = { 138 value: 'GROUP' + i, 139 }; 140 this.list.push(dataItem); 141 } 142 }, 143 collapseOne(e) { 144 this.$element('mylist').collapseGroup({ 145 groupid: 'GROUP1' 146 }) 147 }, 148 expandOne(e) { 149 this.$element('mylist').expandGroup({ 150 groupid: 'GROUP1' 151 }) 152 }, 153 collapseAll(e) { 154 this.$element('mylist').collapseGroup() 155 }, 156 expandAll(e) { 157 this.$element('mylist').expandGroup() 158 }, 159 collapse(e) { 160 promptAction.showToast({ 161 message: 'Close ' + e.groupid 162 }) 163 }, 164 expand(e) { 165 promptAction.showToast({ 166 message: 'Open ' + e.groupid 167 }) 168 } 169} 170``` 171 172 173
