HarmonyOS 鸿蒙Next 数组对象多层嵌套如何循环渲染

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

类似这种格式的数据children里面可能还有children，如何处理呢

export const menuData:Array<MenuType> = [
  {
    id:100,
    title:'常用笔录类型',
    isOpen:false,
    children:[
      {
        id:7,
        title:'行政询问笔录',
        isOpen:false,
        children:[]
      },
      {
        id:8,
        title:'行政检查笔录',
        isOpen:false,
        children:[]
      },
      {
        id:9,
        title:'行政勘验笔录',
        isOpen:false,
        children:[]
      },
      {
        id:10,
        title:'刑事询问笔录',
        isOpen:false,
        children:[]
      },
      {
        id:11,
        title:'刑事辨认笔录',
        isOpen:false,
        children:[
          {
            id:33,
            title:'3级笔录1',
            isOpen:false,
          },
          {
            id:34,
            title:'3级笔录2',
            isOpen:false,
          }
        ]
      },
    ]
  },
  {
    id:101,
    title:'行政笔录',
    isOpen:false,
    children:[
      {
        id:12,
        title:'行政询问笔录2',
        isOpen:false,
        children:[]
      },
      {
        id:13,
        title:'行政检查笔录3',
        isOpen:false,
        children:[]
      }
      ]
  },
  {
    id:3,
    title:'刑事笔录',
    isOpen:false,
    children:[]
  },
]

ForEach(this.menuArray,(item:MenuType,index:number)=>{
    MenuList({childData:item})
},(item:MenuType,index)=>index.toString())

更多关于HarmonyOS 鸿蒙Next 数组对象多层嵌套如何循环渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
使用v2装饰器，同时 Foreach需要传入index，保证每个item的key唯一

更多关于HarmonyOS 鸿蒙Next 数组对象多层嵌套如何循环渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，处理数组对象多层嵌套并循环渲染，可以使用递归函数来遍历和渲染所有层级的数据。递归函数能够自然地处理未知层数的嵌套结构。

具体实现方式如下：

  1. 定义数据结构：假设数据结构为多层嵌套的数组，每个元素可以是数组或基本数据类型。

  2. 递归渲染函数：编写一个递归函数，该函数接收一个数组参数，遍历数组，对每个元素进行检查，如果元素是数组则再次调用该函数进行递归渲染，如果是基本数据类型则直接渲染。

  3. UI布局：在UI布局中，为递归渲染结果预留位置，并在递归函数中动态添加子组件。

示例代码（伪代码）：

void renderNestedArray(UIContainer* container, const std::vector<Variant>& array) {
    for (const auto& item : array) {
        if (item.isArray()) {
            UIContainer* subContainer = new UIContainer();
            container->addChild(subContainer);
            renderNestedArray(subContainer, item.getAsArray());
        } else {
            // 渲染基本数据类型
            UIText* text = new UIText(item.toString());
            container->addChild(text);
        }
    }
}

该函数renderNestedArray接收一个容器和一个数组，遍历数组并递归渲染。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部