HarmonyOS 鸿蒙Next ListItemGroup 的Header如何动态设置

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

HarmonyOS 鸿蒙Next ListItemGroup 的Header如何动态设置

ListItemGroup的Header不是每项都有数据，或者说不是必定有hander的，

目前的问题是 如果没有值，也会生出一个空白的header条目，

如何设置有值时候显示header,没有值的时候就不显示。

Harmonyos Next教程
4 回复

您好，我这边实现了下，是可以实现header没有值的时候就不显示；

主要是在自定义组件itemHead中的Text组件渲染前进行判别，使用if (text) 的条件判断，text为空时就不渲染Text组件；

// xxx.ets
@Entry
@Component
struct ListItemGroupExample {
  private timeTable: TimeTable[] = [
    {
      title: '星期一',
      projects: ['语文', '数学', '英语']
    },
    {
      title: '星期二',
      projects: ['物理', '化学', '生物']
    },
    {
      projects: ['历史', '地理', '政治']
    },
    {

      projects: ['美术', '音乐', '体育']
    }
  ]

  @Builder
  itemHead(text: string) {
    if (text) {
      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: TimeTable) => {
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height(100)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

interface TimeTable {
  title?: string;
  projects: string[];
}

更多关于HarmonyOS 鸿蒙Next ListItemGroup 的Header如何动态设置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


把数据预处理下，没有header的数组合并到上面有header的里面，然后再送去build，这样就绕过了吧

那不行啊，一个模块是一个模块的数据，合并的话，俩模块显示一起肯定不行

在HarmonyOS中，为ListItemGroup动态设置Header，可以通过修改其对应的Component属性来实现。ListItemGroup是鸿蒙系统提供的一种用于展示列表项的组件，而Header通常是这些列表项的一个分组标题。

要动态设置ListItemGroup的Header，可以使用以下方法：

  1. 获取或创建Header组件：首先，确保你有一个Component（如Text组件）作为Header。如果Header组件已经在布局文件中定义，可以通过findComponentById方法获取它；如果未定义，可以动态创建一个。

  2. 设置Header内容：通过调用Header组件的setText（如果是Text组件）或其他相关方法，设置其内容为你想要展示的动态数据。

  3. 将Header与ListItemGroup关联：通常，ListItemGroup的Header是在布局文件中通过XML属性直接指定的。若需动态设置，可能需要自定义逻辑来模拟这一行为，比如将Header组件作为ListItemGroup的一个子组件插入，或者通过其他方式在逻辑上将其与ListItemGroup关联。

示例代码（伪代码）：

// 假设headerText是要设置的Header文本
let header = this.$element('headerId'); // 获取Header组件
header.setText(headerText); // 设置Header文本

// 注意：实际关联逻辑可能需要根据具体需求实现

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

回到顶部