HarmonyOS鸿蒙Next中ListItemGroup怎么添加数据啊

HarmonyOS鸿蒙Next中ListItemGroup怎么添加数据啊

@State timeTable: tabGroup[] = [] 分组数据

/**

  • 分组的情况 */ class tabGroup { id: number = 0 @Track title: string = ‘’ @Track list: NewsListBean[] = [] page: number = 2 }

当timeTable[0].list.pust()新数据时，UI没有更新，这该如何处理？

3 回复

对于嵌套类对象属性变化推荐用ObjectLink和Observed，参考文档
[@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化-管理组件拥有的状态-状态管理（V1）-状态管理-学习ArkTS语言-基础入门 - 华为HarmonyOS开发者](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5)

以下是简单demo，可供参考

// import { Constants } from '@ohos/common/Index';

import { systemDateTime } from '@kit.BasicServicesKit';

// xxx.ets
@Entry
@Component
struct Page1 {
  @State timeTable: Array<tabGroup> = [new tabGroup("分组1"), new tabGroup("分组2"), new tabGroup("分组3")];

  aboutToAppear(): void {
    this.timeTable[0].push('1')
    this.timeTable[1].push('2')
    this.timeTable[2].push('3')
    console.log(JSON.stringify(this.timeTable))
  }

  build() {
    Column {
      List {
        ForEach(this.timeTable, (items: tabGroup, index: number) => {
          ViewA({ item: items, index: index });
        }, (item: tabGroup, index: number) => JSON.stringify(item))
      }
    }
  }
}

@Component
struct ViewA {
  [@ObjectLink](/user/ObjectLink) item: tabGroup;
  label: string = 'ViewA1';
  index?: number;

  build() {
    ListItemGroup({
      header: this.groupItemMoreTitle(this.item.title),
      footer: this.groupItemClickMore(this.item, this.index ?? 0)
    }) {
      ForEach(this.item, (item: string, index: number) => {
        ListItem() {
          Text(item).height(80).width('100%')
        }
      }, (item: string, index: number) => JSON.stringify(item))
    }
  }

  @Builder
  groupItemMoreTitle(item: string) {
    Text(item)
      .fontWeight(10)
      .fontSize(16)
      .width('100%')
      .height(40)
      .padding({ left: 12 })
      .fontWeight(FontWeight.Bold)
  }

  @Builder
  groupItemClickMore(item: tabGroup, index: number) {
    Column {
      Row {
        Text() {
          Span(this.item.title).fontSize(13).fontColor(Color.Red)
          ImageSpan($r('app.media.app_icon')).size({ width: 12, height: 12 })
        }
      }.height(40).justifyContent(FlexAlign.Center).width('100%').onClick(() => {
        this.item.push("增加" + systemDateTime.getTime()) //添加
      })

      Divider().color(Color.Gray).width('100%').strokeWidth(6)
    }
  }
}

[@Observed](/user/Observed)
class tabGroup extends Array<String> {
  title?: string;

  constructor(title: string) {
    super();
    this.title = title
    // this.list = list
  }
}

更多关于HarmonyOS鸿蒙Next中ListItemGroup怎么添加数据啊的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，ListItemGroup是用于分组显示列表项的组件。要为ListItemGroup添加数据，可以通过ListContainer的ItemProvider来实现。具体步骤如下：

  1. 创建数据源：首先，准备一个数据源，通常是一个列表（List），其中包含需要显示的分组数据。

  2. 实现ItemProvider：创建一个继承自BaseItemProvider的类，并重写getCount、getItem、getItemId和getComponent方法。在getComponent方法中，根据数据源返回对应的ListItem或ListItemGroup。

  3. 绑定数据源：将数据源与BaseItemProvider绑定，并将其设置为ListContainer的ItemProvider。

  4. 添加数据：在ListItemGroup中，通过addComponent方法添加子项（ListItem），然后将ListItemGroup添加到ListContainer中。

示例代码如下：

// 假设已有数据源
let dataSource = [
  { groupTitle: "Group 1", items: ["Item 1", "Item 2"] },
  { groupTitle: "Group 2", items: ["Item 3", "Item 4"] }
];

class MyItemProvider extends BaseItemProvider {
  constructor(data) {
    super();
    this.data = data;
  }

  getCount() {
    return this.data.length;
  }

  getItem(position) {
    return this.data[position];
  }

  getItemId(position) {
    return position;
  }

  getComponent(position, component) {
    let group = this.data[position];
    let listItemGroup = new ListItemGroup({ header: group.groupTitle });
    group.items.forEach(item => {
      listItemGroup.addComponent(new ListItem({ content: item }));
    });
    return listItemGroup;
  }
}

let listContainer = new ListContainer();
listContainer.itemProvider = new MyItemProvider(dataSource);

通过以上步骤，可以在ListItemGroup中成功添加数据并显示。

在HarmonyOS鸿蒙Next中，使用ListItemGroup时，可以通过ItemProvider来添加数据。首先，创建一个继承自BaseItemProvider的类，并实现相关方法。然后，将数据源与ItemProvider绑定，并通过setItemProvider方法将其设置到ListItemGroup中。例如：

class MyItemProvider extends BaseItemProvider<MyData> {
    private List<MyData> mDataList;

    public MyItemProvider(List<MyData> dataList) {
        this.mDataList = dataList;
    }

    @Override
    public int getCount() {
        return mDataList.size();
    }

    @Override
    public MyData getItem(int position) {
        return mDataList.get(position);
    }

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer parent) {
        // 创建并返回Item视图
    }
}

// 使用
ListItemGroup listItemGroup = (ListItemGroup) findComponentById(ResourceTable.Id_list_item_group);
MyItemProvider itemProvider = new MyItemProvider(dataList);
listItemGroup.setItemProvider(itemProvider);

这样，ListItemGroup就会显示你提供的数据。

回到顶部