鸿蒙中自定义全选

export class WatchListsItemType {
  name: string = ''
  value: string = ''
  hasShare: boolean = false
}

@Entry({ routeName: "EditFund" })
@Component
export struct EditFund {
  // 顶部安全区域高度
  statusBarHeight: number | undefined = AppStorage.get<number>('statusBarHeight')
  @State contentTitle: Array<string> = ['置顶', '置底', '排序']
  @State icon: Array<string> = ['app.media.Download', 'app.media.upload2', 'app.media.more']
  @State EditFundWatchListData: WatchListsItemType[] = [
    { name: "a", value: '000001', hasShare: false },
    { name: "b", value: '000002', hasShare: false },
    { name: "c", value: '000003', hasShare: false },
    { name: "d", value: '000004', hasShare: false },
    { name: "e", value: '000005', hasShare: false },
    { name: "f", value: '000006', hasShare: false },
    { name: "g", value: '000007', hasShare: false },
    { name: "h", value: '000008', hasShare: false },
  ]
  @Watch('allSelect') @State AllCheck: true | false | 'no' = false

  allSelect() {
    console.log('this.allselect' + this.AllCheck)
    if (this.AllCheck !== 'no') {

      for (let i = 0; i < this.EditFundWatchListData.length; i++) {
        console.log(this.AllCheck + '--------')
        this.EditFundWatchListData[i].hasShare = this.AllCheck as boolean;
      }

    }
    this.EditFundWatchListData = [...this.EditFundWatchListData]
  }

  // 内容列表
  @Builder
  ContentList(item: WatchListsItemType, i: number) {
    Column() {
      Row() {
        Row() {
          Checkbox()
            .select(item.hasShare)
            .onClick(() => {
              item.hasShare = !item.hasShare
              let temp: true | false | 'no' = true;
              this.EditFundWatchListData.forEach((item: ESObject, i: number) => {
                if (!this.EditFundWatchListData[i].hasShare) {
                  temp = 'no'
                  return
                }
              })
              // 更新全选按钮状态
              if (this.AllCheck === temp) {
                return
              }
              this.AllCheck = temp;
            })
          Column() {
            Text(item.name)
              .width('100%')
              .textAlign(TextAlign.Start)
              .fontSize(15)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .ellipsisMode(EllipsisMode.END)
              .maxLines(1)

            Text(item.value)
              .width('100%')
              .margin({ top: 5 })
              .textAlign(TextAlign.Start)
              .fontSize(12)
              .fontColor('#c0c4cc')
          }.margin({ left: 5 }).width('90%')
        }.width('50%').margin({ top: 5 })

        Row() {
          ForEach(this.icon, (item: string, i: number) => {
            Image($r(item)).width(15)
          })
        }.width('50%').justifyContent(FlexAlign.SpaceAround)
      }.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({ top: 5, bottom: 5 })

      // 下划线
      Row() {
      }.width('98%').backgroundColor('#ccc').height(1)

    }.padding({ left: 5 }).width('100%').alignItems(HorizontalAlign.End)
  }

  build() {
    Column() { // 状态栏高度
      Column() {

      }.height(this.statusBarHeight).backgroundColor('#f6f7f9').width('100%')


      //   内容
      Column() {
        // 内容标题
        Row() {
          Row() {
            Checkbox().margin({ left: 10, right: 7 }).select(this.AllCheck as boolean)
              .onClick(() => {
                console.log('change' + this.AllCheck)
                this.AllCheck == 'no' ? this.AllCheck = true : this.AllCheck = !this.AllCheck
              })
            Text('全选').fontColor('#8e99a3')
          }

          Row() {
            ForEach(this.contentTitle, (item: string, i: number) => {
              Text('|').fontColor('#8e99a3').width(1)
              Text(item)
                .margin({ left: 16, right: 16 }).fontColor('#8e99a3')
            })
          }

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .border({ width: { top: 1, bottom: 1 }, color: "#ebebef" }).padding({ top: 5, bottom: 5 })

        //   内容列表
        ForEach(this.EditFundWatchListData, (item: WatchListsItemType, i: number) => {
          this.ContentList(item, i)
          // Text(item.fundName)
        })
        //   底部删除
        Row() {
          Text(``)
        }
      }

    }
  }
}