ListItemGroup cannot use the ternary operator.

Read the original article：ListItemGroup cannot use the ternary operator.

Question

How to use the ternary operator in ListItemGroup to render different components?

Short Answer

Use the ListItemGroupOptions object to specify the following parameter headerComponent. Below is part of the key code:

import { ComponentContent } from '@kit.ArkUI';

@Builder
function A() {
  Text("A")
    .fontSize(20)
    .height('48vp')
    .width('100%')
    .padding(10)
    .backgroundColor($r('sys.color.background_tertiary'))
}

@Builder
function B() {
  Text("B")
    .fontSize(20)
    .height('48vp')
    .width('100%')
    .padding(10)
    .backgroundColor($r('sys.color.background_tertiary'))
}

@Entry
@Component
struct Index {
  private list?: MyDataSource2;
  @State isActive: boolean = true

  headerA?: ComponentContent<string> = undefined;
  headerB?: ComponentContent<string> = undefined;

  aboutToAppear() {
    const listItem: MyDataSource1[] = [];
    for (let date = 1; date < ~~(Math.random() * 30) + 3; date++) {

      const strs: string[] = [];
      for (let index = 1; index < ~~(Math.random() * 100) + 30; index++) {
        strs.push(`hello${index}`);
      }
      let dayData = new MyDataSource1(strs);
      listItem.push(dayData)
    }
    this.list = new MyDataSource2(listItem);

    this.headerA = new ComponentContent(this.getUIContext(), wrapBuilder(A));
    this.headerB = new ComponentContent(this.getUIContext(), wrapBuilder(B));
  }

  build() {
    Column() {
      Button("switch").onClick((event: ClickEvent) => {
        this.isActive = !this.isActive
      })
      List({ space: 20 }) {
        LazyForEach(this.list, (item: MyDataSource1) => {
          ListItemGroup({ headerComponent: this.isActive ? this.headerA : this.headerB }) {
            LazyForEach(item, (order: string,) => {
              ListItem() {
                Text(order)
                  .width('100%')
                  .height(60)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
            })
          }
          .divider({ strokeWidth: 1, color: Color.Blue })
        })
      }
      .height('100%')
      .cachedCount(1)
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string | MyDataSource1 {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }
}

class MyDataSource1 extends BasicDataSource {
  private dataArray: string[] = [];
  public title?: string;
  public header?: CustomBuilder;
  constructor(dataArray: string[]) {
    super();
    this.dataArray = dataArray;
  }

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}


class MyDataSource2 extends BasicDataSource {
  private dataArray: MyDataSource1[] = [];

  constructor(dataArray: MyDataSource1[]) {
    super();
    this.dataArray = dataArray;
  }

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): MyDataSource1 {
    return this.dataArray[index];
  }

  public addData(index: number, data: MyDataSource1): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: MyDataSource1): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

Applicable Scenarios

• watch 5

Written by Mehmet Karaaslan