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