HarmonyOS 鸿蒙Next API9的ListItemGroup用法问题

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next API9的ListItemGroup用法问题 ListItemGroup的官方示例代码运行的效果是这样的

当我把

projects里的数组元素换成对象之后(我自己的JSON数据),每个组里面只显示一项数据,这是怎么回事?怎么解决?

官方文档示例:ListItemGroup-容器组件-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考-HarmonyOS应用开发

我的代码:

// xxx.ets
@Entry
@Component
struct ListItemGroupExample {
  private timetable: any = [
    {
      "title": "阿坝",
      "project": [
        {"provinces": "四川省","cities": "阿坝","counties": "马尔康","id": 101271910},
        {"provinces": "四川省","cities": "阿坝","counties": "金川","id": 101271907},
        {"provinces": "四川省","cities": "阿坝","counties": "理县","id": 101271903},
        {"provinces": "四川省","cities": "阿坝","counties": "九寨沟","id": 101271906},
        {"provinces": "四川省","cities": "阿坝","counties": "小金","id": 101271908},
        {"provinces": "四川省","cities": "阿坝","counties": "红原","id": 101271913},
        {"provinces": "四川省","cities": "阿坝","counties": "松潘","id": 101271905},
        {"provinces": "四川省","cities": "阿坝","counties": "黑水","id": 101271909},
        {"provinces": "四川省","cities": "阿坝","counties": "茂县","id": 101271904},
        {"provinces": "四川省","cities": "阿坝","counties": "阿坝","id": 101271901},
        {"provinces": "四川省","cities": "阿坝","counties": "汶川","id": 101271902},
        {"provinces": "四川省","cities": "阿坝","counties": "壤塘","id": 101271911},
        {"provinces": "四川省","cities": "阿坝","counties": "若尔盖","id": 101271912}
      ]
    },
    {
      "title": "阿克苏",
      "project": [
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "乌什","id": 101130802},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "温宿","id": 101130803},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "沙雅","id": 101130806},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "拜城","id": 101130804},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "阿克苏","id": 101130801},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "新和","id": 101130805},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "阿瓦提","id": 101130809},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "库车","id": 101130807},
        {"provinces": "新疆维吾尔自治区","cities": "阿克苏","counties": "柯坪","id": 101130808}
      ]
    },
    {
      "title": "阿拉尔",
      "project": [
        {"provinces": "新疆维吾尔自治区","cities": "阿拉尔","counties": "阿拉尔","id": 101130701}
      ]
    },
    {
      "title": "阿拉善盟",
      "project": [
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "锡林高勒","id": 101081206},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "阿左旗","id": 101081201},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "阿右旗","id": 101081202},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "雅布赖","id": 101081210},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "乌斯太","id": 101081211},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "头道湖","id": 101081207},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "拐子湖","id": 101081204},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "吉兰太","id": 101081205},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "巴彦诺日公","id": 101081209},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "中泉子","id": 101081208},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "孪井滩","id": 101081212},
        {"provinces": "内蒙古自治区","cities": "阿拉善盟","counties": "额济纳","id": 101081203}
      ]
    },
    {
      "title": "阿勒泰",
      "project": [
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "富蕴","id": 101131408},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "阿勒泰","id": 101131401},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "吉木乃","id": 101131405},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "布尔津","id": 101131406},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "哈巴河","id": 101131402},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "青河","id": 101131409},
        {"provinces": "新疆维吾尔自治区","cities": "阿勒泰","counties": "福海","id": 101131407}
      ]
    }
  ]

  @Builder itemHead(text:string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }

  @Builder itemFoot(num:number) {
    Text('共' + num + "节课")
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(5)
  }

  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.timetable, (item) => {
          ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.project.length) }) {
            ForEach(item.project, (project) => {
              ListItem() {
                Text(project.counties)
                  .width("100%").height(100).fontSize(20)
                  .textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)
              }
            }, item)
          }
          .borderRadius(20)
          .divider({ strokeWidth: 1, color: 0xDCDCDC }) // 每行之间的分界线
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header|StickyStyle.Footer)
    }
    .width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

更多关于HarmonyOS 鸿蒙Next API9的ListItemGroup用法问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

楼主,将这个key值改成这样,就可以了。因为这里的item是一个object,是引用类型,会被误判成key值相等,导致只会渲染一个。

更多关于HarmonyOS 鸿蒙Next API9的ListItemGroup用法问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


OK了,谢谢,

感谢您的反馈,如后期有疑问可以随时发帖,感谢您的支持。

关于HarmonyOS 鸿蒙Next API9中的ListItemGroup用法,以下是简要说明:

ListItemGroup是鸿蒙系统中用于在列表视图中分组显示项目的一个组件。它允许开发者将相似的项目归类在一起,并通过一个标题或分隔线来区分不同的组。

在使用ListItemGroup时,你需要首先创建一个ListItemGroup对象,并设置其标题等属性。然后,你可以向该组中添加具体的列表项(ListItem)。这些列表项可以是文本、图片或其他自定义视图。

在布局文件中,你可以通过XML标签来定义ListItemGroup及其子项。在代码中,你也可以通过编程方式动态创建和添加这些组件。

需要注意的是,不同版本的鸿蒙系统API可能会有所不同,因此在具体使用时,请参考你所使用的鸿蒙系统版本的官方文档。

如果你在使用ListItemGroup时遇到了具体的问题,比如布局不显示、数据绑定失败等,可能是由于属性设置不当、数据格式不匹配或系统bug等原因造成的。此时,你可以检查相关属性和数据格式是否正确,或者尝试更新鸿蒙系统到最新版本。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部