#鸿蒙通关秘籍#在鸿蒙开发中如何实现列表的折叠和展开功能？

在鸿蒙开发中，可以通过添加groupcollapse和groupexpand事件实现列表的折叠和展开：

1. 设置list-item-group组件并为其定义折叠和展开事件：

   html <!-- xxx.hml --> <div class="doc-page"> <list style="width: 100%;" id="mylist"> <list-item-group for="listgroup in list" id="`listgroup`.`value`" ongroupcollapse="collapse" ongroupexpand="expand"> <list-item type="item" style="background-color:#FFF0F5;height:95px;"> <div class="item-group-child"> <text>One---`listgroup`.`value`</text> </div> </list-item> <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true"> <div class="item-group-child"> <text>Primary---`listgroup`.`value`</text> </div> </list-item> </list-item-group> </list> </div>

2. 使用JavaScript定义事件处理函数：

   javascript // xxx.js import promptAction from '@ohos.promptAction'; export default { data: { direction: 'column', list: [] }, onInit() { this.list = [] for (var i = 1; i <= 2; i++) { var dataItem = { value: 'GROUP' + i, }; this.list.push(dataItem); } }, collapse(e) { promptAction.showToast({ message: 'Close ' + e.groupid }) }, expand(e) { promptAction.showToast({ message: 'Open ' + e.groupid }) } }

3. 为容器和列表项定义样式：

   css /* xxx.css */ .doc-page { flex-direction: column; background-color: #F1F3F5; } .item-group-child { justify-content: center; align-items: center; width:100%; }

通过定义折叠和展开事件，不仅支持组的交互，还能够通过promptAction.showToast()函数提示用户当前列表组的状态。