HarmonyOS 嵌套类数组的复选框连带选择的例子

参考示例demo如下：

@Observed
export class CartCompany {
  @Track companyName: string = '';
  @Track sellRootId:number = 0;
  @Track subItems: CartGoods[] = [];
  @Track selected:boolean = false;

  constructor(companyName: string, sellRootId: number, subItems: CartGoods[]) {
    this.companyName = companyName;
    this.sellRootId = sellRootId;
    this.subItems = subItems;
  }
}

export class CartGoods {
  title:string = ''
  constructor(title: string) {
    this.title = title;
  }
}

@Entry
@Component
struct CheckboxExample {
  @State companyList: CartCompany[] = [
    new CartCompany('companyA', 1, [
      new CartGoods('AGoods1'),
      new CartGoods('AGoods2')
    ]),
    new CartCompany('companyB', 2, [
      new CartGoods('BGoods1'),
      new CartGoods('BGoods2')
    ]),
  ]
  @State selectAll: boolean = false
  build() {
    Scroll() {
      Column() {
        //CheckBoxGroup不支持嵌套，自定义一个最上层的Checkbox全选按钮，手动管理
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox()
            .selectedColor($r('sys.color.brand'))
            .select(this.selectAll)
            .onClick(() => {
              this.selectAllOrCancel();
            })
          Text('全选').fontSize(14).lineHeight(20).fontColor($r('sys.color.font_primary')).fontWeight(500)
        }
        ForEach(this.companyList, (item: CartCompany) => {
          //公司属性selected和全选按钮绑定，为了刷新UI,使用@Observed和@ObjectLink监测数组内对象属性状态
          CompanyItem({ bean: item })
        })
      }
    }
  }

  selectAllOrCancel() {
    if (this.selectAll) {
      for (let i = 0; i < this.companyList.length; i++) {
        this.companyList[i].selected = false
      }
    } else {
      for (let i = 0; i < this.companyList.length; i++) {
        this.companyList[i].selected = true
      }
    }
    this.selectAll = !this.selectAll
  }
}

@Component
struct CompanyItem {
  @ObjectLink bean: CartCompany
  build() {
    Column() {
      //到公司层级用checkGroup管理
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CheckboxGroup({ group: 'checkboxGroup' + this.bean.sellRootId })
          .selectedColor($r('sys.color.brand'))
          .selectAll(this.bean.selected)
        Text(this.bean.companyName).fontSize(14).lineHeight(20).fontColor($r('sys.color.font_primary')).fontWeight(500)
      }
      ForEach(this.bean.subItems, (goodsBean: CartGoods, index) => {
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: goodsBean.title, group: 'checkboxGroup' + this.bean.sellRootId })
            .selectedColor($r('sys.color.brand'))
          Text(goodsBean.title).fontSize(14).lineHeight(20).fontColor($r('sys.color.font_primary')).fontWeight(500)
        }.margin({ left: 36 })
      })
    }
  }
}