HarmonyOS鸿蒙Next中实现多个数据进行展开和折叠的布局，互不影响

HarmonyOS鸿蒙Next中实现多个数据进行展开和折叠的布局，互不影响 现在我的代码有一系列数据，但是布局现在是当点击展开一条数据，其他数据的ui全部的展开，点击折叠，其他数据也全部折叠，我想实现一系列数据点击展开和折叠互不影响，怎么实现，能否给一个代码例子

4 回复

实现多个数据单独展开和折叠效果可参考代码：

interface GroupItem {
  title: string;
  items: string[];
}

@Entry
@Component
struct SimpleExpandList {
  @State groups: Array<GroupItem> = [
    { title: '水果', items: ['苹果', '香蕉'] },
    { title: '蔬菜', items: ['西红柿', '土豆'] }
  ] as GroupItem[];
  @State expands: boolean[] = new Array(this.groups.length).fill(false);

  build() {
    List() {
      ForEach(this.groups, (group:GroupItem, gIndex) => {
        // 分组头
        ListItem() {
          Row() {
            Text(group.title).fontSize(18).fontWeight(FontWeight.Medium)
            Blank()
            Image(this.expands[gIndex] ? $r('app.media.background') : $r('app.media.startIcon'))
              .width(20).height(20)
          }
          .padding(16).width('100%')
          .backgroundColor('#fff')
          .onClick(() => {
            animateTo({ duration: 200 }, () => {
              this.expands[gIndex] = !this.expands[gIndex];
            });
          })
        }

        // 子条目
        if (this.expands[gIndex]) {
          ForEach(group.items, (item:string) => {
            ListItem() {
              Text(item).padding({ left: 32, top: 12, bottom: 12 })
            }
            .backgroundColor('#fafafa')
          })
        }
      })
    }
    .divider({ strokeWidth: 1, color: '#eee' })
  }
}

更多关于HarmonyOS鸿蒙Next中实现多个数据进行展开和折叠的布局，互不影响的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【背景知识】
List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

【参考方案】：
可参考查看账单收支明细示例，通过使用List组件实现多层级折叠列表以及点击账单展开收支明细的交互效果。

  1. 通过List组件实现嵌套列表，其中账单列表为父列表，明细列表为子列表。在父列表项和子列表项中分别设置isExpand变量并初始化为false。
  2. 点击父列表子项，isExpand值变为true，通过if/else语句判断是否有子列表，有则展开。
// 父列表子项
Row() {}
.onClick(() => {
  this.isExpand = !this.isExpand
  this.item.isExpand = this.isExpand
})
// 判断子列表是否展开
if (this.item.children.length > 0 && this.isExpand) {
  // 子列表
  this.expandChildItem()
}

在HarmonyOS鸿蒙Next中，可通过使用Stack容器结合条件渲染实现多个数据的展开和折叠布局。每个数据项独立控制显示状态，使用@State装饰器管理展开/折叠状态，确保互不干扰。布局结构采用Column或List嵌套，通过动态调整visibility属性或height实现平滑的展开折叠效果。

在HarmonyOS Next中，可以通过为每个数据项维护独立的展开状态来实现互不影响的展开/折叠效果。以下是使用ArkTS的示例代码：

@Entry
@Component
struct ExpandableList {
  private dataList: Array<{ id: number, content: string, isExpanded: boolean }> = [
    { id: 1, content: "数据项1", isExpanded: false },
    { id: 2, content: "数据项2", isExpanded: false },
    { id: 3, content: "数据项3", isExpanded: false }
  ]

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.dataList, (item: { id: number, content: string, isExpanded: boolean }) => {
          ListItem() {
            this.ExpandableItem(item)
          }
        }, (item: { id: number, content: string, isExpanded: boolean }) => item.id.toString())
      }
    }
  }

  @Builder
  ExpandableItem(item: { id: number, content: string, isExpanded: boolean }) {
    Column() {
      // 标题行
      Row() {
        Text(item.content)
          .fontSize(16)
        Image($r('app.media.arrow_down')) // 展开图标
          .rotate({ x: 0, y: 0, z: 1, angle: item.isExpanded ? 180 : 0 })
          .onClick(() => {
            // 切换当前项的展开状态
            item.isExpanded = !item.isExpanded
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)

      // 展开内容
      if (item.isExpanded) {
        Text("这是展开的详细内容")
          .fontSize(14)
          .margin({ top: 10 })
      }
    }
    .padding(10)
    .backgroundColor(Color.White)
    .borderRadius(8)
  }
}

关键点：

  1. 每个数据项包含独立的isExpanded状态字段
  2. 点击事件只修改当前数据项的展开状态
  3. 使用条件渲染(if语句)根据各自状态显示/隐藏详细内容
  4. 通过@Builder封装可复用的列表项组件

这样每个数据项的展开/折叠操作都是独立的，不会影响其他项的状态。

回到顶部