HarmonyOS 鸿蒙Next @Observerd和@Trance装饰的类，ui不刷新，关于是否选中的ui

/**
 * @Author ZZ
 * @DateTime 2024/10/22 10:19
 *
 * @Description 筛选弹窗
 */
import { CommonConstants } from ‘@ohos/common’
import { promptAction } from ‘@kit.ArkUI’
import { JSON } from ‘@kit.ArkTS’

@ObservedV2
export class filterItem {
  id?: string;
  category?: string;
  subCategoryName?: string;
  imageUrl?: null;
  @Trace isAll?: boolean=false;
}

@ComponentV2
export struct DiningFiltercomp {
  @Param DiningsFilterData: filterItem[] = []
  @Param topHeight: number = 0
  @Provider(‘isAllSelect’) isAllSelect: boolean = false

  build() {
    Column() {
      Image($rawfile(‘function/filter_btn_p.png’)).width(36).alignSelf(ItemAlign.End).offset({ x: -8 })
      Column() {
        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
          // 全选内容
          Row({ space: 4 }) {
            Image($rawfile(this.isAllSelect ? ‘function/inbox_select.png’ : ‘function/inbox_unselect.png’))
              .width(18)
            Text(‘All’)
              .fontColor(this.isAllSelect ? $r(‘app.color.text_color_ffc26d’) : ‘#ccc’)
              .layoutWeight(1)
              .fontSize(14)
          }
          .padding({ left: 10 })
          .width(‘50%’)
          .margin({ top: 6, bottom: 6 })
          .onClick(() => {
            this.toggleAllSelection();
          })

          // 循环数据
          ForEach(this.DiningsFilterData, (item: filterItem) => {
            isSelectComp({ itemData: item, AllData: this.DiningsFilterData })
          })
        }

        Divider().border({ width: 1, color: ‘#ccc’ }).width(‘96%’).offset({ x: -4 }).margin({ top: 18, bottom: 8 })
      }
      .padding({
        left: 10,
        top: 20,
        bottom: 10
      })
      .width(CommonConstants.FULL_WIDTH)
      .backgroundImage($rawfile(‘function/dinning_filter_bg.png’))
      .backgroundImageSize(ImageSize.FILL)
    }
    .padding({ top: this.topHeight })
    .width(‘96%’)
  }

  private toggleAllSelection() {
    this.isAllSelect = !this.isAllSelect;
    for (let i = 0; i < this.DiningsFilterData.length; i++) {
      this.DiningsFilterData[i].isAll = this.isAllSelect;
    }
  }
}

// 选项组件
@ComponentV2
export struct isSelectComp {
  @Param itemData: filterItem = new filterItem()
  @Param AllData: filterItem[] = []
  @Consumer(‘isAllSelect’) isAllSelect: boolean = false

  build() {
    Row({ space: 4 }) {
      Text(String(this.itemData.isAll)).fontColor(’#fff’)
      Image($rawfile(this.itemData.isAll ? ‘function/inbox_select.png’ : ‘function/inbox_unselect.png’))
        .width(18)
      Text(this.itemData.subCategoryName)
        .fontColor(this.itemData.isAll ? $r(‘app.color.text_color_ffc26d’) : ‘#ccc’)
        .layoutWeight(1)
        .fontSize(14)
    }
    .padding({ left: 10 })
    .width(‘50%’)
    .margin({ top: 6, bottom: 6 })
    .onClick(() => {
      this.toggleItemSelection();
    })
  }

  private toggleItemSelection() {
    this.itemData.isAll = !this.itemData.isAll;
    promptAction.showToast({ message: JSON.stringify(this.itemData.isAll) });

    // 控制全选状态
    this.updateAllSelection();
  }

  private updateAllSelection() {
    let allSelected = true;
    for (let i = 0; i < this.AllData.length; i++) {
      if (!this.AllData[i].isAll) {
        allSelected = false;
        break;
      }
    }
    this.isAllSelect = allSelected;
  }
}