HarmonyOS 鸿蒙Next 分组列表实践（嵌套列表） 鸿蒙场景化代码
HarmonyOS 鸿蒙Next 分组列表实践（嵌套列表） 鸿蒙场景化代码
<markdown _ngcontent-eqf-c147="" class="markdownPreContainer">
分组列表实践（嵌套列表）
介绍
本示例实现了分组列表中分组的收起与展开，列表的数据懒加载，子列表数据操作，子条目侧滑删除以及跨分组拖拽条目五个功能。
使用说明
- 进入应用分组列表默认展开，点击“收起”按钮可将分组列表收起。
- 子列表均可滑动，点击子条目侧滑，可删除该条目。
- 点击“新增数据”按钮，子列表底部会新增一条数据。
- 长按子条目并拖动，列表左侧会出现黄色方块，方块移动到其他子列表时释放，可将子条目添加到该子列表底部。
实现思路
分组的收起与展开
该功能主要在子列表中实现，主要思路就是通过改变子列表项高度来实现。核心代码如下，源码参考
Index.ets
Row() {
Text(this.data.title)
.fontSize(20)
.padding(10)
Row() {
Button('新增数据')
.fontSize(12)
.onClick(() => {
animateTo({ duration: 300 }, () => {
this.projects.pushData('新增数据')
})
})
Button(this.itemHeight ? '收起' : '展开')
.fontSize(12)
.onClick(() => {
this.itemHeight = this.itemHeight ? 0 : 100
})
}
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(0xAABBCC)
子列表新增数据和侧滑删除功能
新增数据功能通过在子列表的数据懒加载中pushData或者addData实现，子条目侧滑删除功通过是调用ListItem组件的swipeAction属性来实现，需要注意的是，所有的数据操作都需要使用DataSource中的接口来操作。核心代码如下，源码参考
Index.ets
ListItem() {
Row() {
Text(item)
.fontSize(20)
.textAlign(TextAlign.Center)
}
.width('100%')
.justifyContent(FlexAlign.Center)
.height(this.itemHeight)
.animation({ duration: 300, iterations: 1 })
.backgroundColor(0xFFFFFF)
.onClick(() => {
this.projects.changeData('更新数据', index)
})
}
.swipeAction({
end: {
builder: () => {
this.itemEnd()
},
onAction: () => {
animateTo({ duration: 300 }, () => {
this.projects.deleteData(item)
})
},
actionAreaDistance: 40,
onEnterActionArea: () => {
},
onExitActionArea: () => {
}
}
})
跨分组拖拽条目
通过在列表中监听onItemDragStart事件即可开启拖拽功能，同时我们还需要监听onItemDrop让每个子列表都是可以放置的目标。在拖拽放置的时候onItemDrop会拿到两个索引itemIndex——拖拽起始位置，和insertIndex——拖拽插入位置，当我们放置目标的时候，如果是不属于该子列表的元素，itemIndex会返回-1。
所以我们可以被拖拽条目的数据缓存在AppStroge中，放置目标的时候若itemIndex为-1，则表示当前这一项不来自于这个子列表，则可通过pushData让被拖拽条目进入该子列表，同时放置完成后原列表要判断insertIndex是否为-1，若是则说明条目被拖出去了，要在源列表中deleteData。核心代码如下，源码参考
Index.ets
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
this.text = this.projects.getData(itemIndex)
AppStorage.setOrCreate('dropData', this.projects.getData(itemIndex) as string);
return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
//绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
if (!isSuccess || insertIndex >= this.projects.totalCount()) {
return
}
<span class="hljs-keyword">if</span> (insertIndex === -<span class="hljs-number">1</span>) {
<span class="hljs-comment">// 拖出的list</span>
<span class="hljs-title function_">animateTo</span>({ <span class="hljs-attr">duration</span>: <span class="hljs-number">300</span>, <span class="hljs-attr">iterations</span>: <span class="hljs-number">1</span> }, <span class="hljs-function">() =></span> {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">projects</span>.<span class="hljs-title function_">deleteData</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">projects</span>.<span class="hljs-title function_">getData</span>(itemIndex))
})
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'拖出去'</span>)
}
<span class="hljs-keyword">if</span> (itemIndex === -<span class="hljs-number">1</span>) {
<span class="hljs-comment">// 放置的list</span>
<span class="hljs-title function_">animateTo</span>({ <span class="hljs-attr">duration</span>: <span class="hljs-number">300</span>, <span class="hljs-attr">iterations</span>: <span class="hljs-number">1</span> }, <span class="hljs-function">() =></span> {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">projects</span>.<span class="hljs-title function_">pushData</span>(<span class="hljs-title class_">AppStorage</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'dropData'</span>)!)
})
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'放进来'</span>)
}
})
工程结构&模块类型
entry/src/main/ets/
|---entryability
| |---EntryAbility.ets //程序入口类
|---pages
| |---Index.ets // 首页
参考资料
无
</markdown>更多关于HarmonyOS 鸿蒙Next 分组列表实践（嵌套列表） 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS 鸿蒙Next 分组列表实践（嵌套列表） 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现分组列表（嵌套列表）的场景化代码，可以通过使用ArkUI的JS框架来实现。以下是一个基本的示例代码：
@Entry
@Component
struct NestedList {
@State listData: Array<any> = [
{
title: 'Group 1',
items: ['Item 1-1', 'Item 1-2', 'Item 1-3']
},
{
title: 'Group 2',
items: ['Item 2-1', 'Item 2-2']
}
];
build() {
Column() {
ForEach(this.listData, (item) => {
List({ space: 20 }) {
ListHeader(item.title)
ForEach(item.items, (subItem) => {
ListItem({ text: subItem })
})
}
})
}.padding(16)
}
}
该代码定义了一个NestedList组件，包含一个状态listData，该状态是一个包含分组信息和子项的数组。通过ForEach循环遍历listData，对于每个分组，使用List组件来展示分组标题和子项。ListHeader用于显示分组标题，ListItem用于显示子项。
以上代码展示了如何在ArkUI中实现分组列表的基本结构。如果在实际开发中遇到更复杂的需求或问题，可以参考HarmonyOS官方文档或API进行进一步开发和调试。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
