HarmonyOS 鸿蒙Next属性如何进行判断

@Component
struct SegmentButtonItemArrayComponent {
  @ObjectLink @Watch(‘onOptionsArrayChange’) optionsArray: SegmentButtonItemOptionsArray
  @ObjectLink @Watch(‘onOptionsChange’) options: SegmentButtonOptions
  @Link selectedIndexes: number[]
  @Consume componentSize: SizeOptions
  @Consume buttonBorderRadius: LocalizedBorderRadiuses[]
  @Consume @Watch(‘onButtonItemsSizeChange’) buttonItemsSize: SizeOptions[]
  @Consume buttonItemsPosition: Position[]
  @Consume focusIndex: number
  @Consume zoomScaleArray: number[]
  @Consume buttonItemProperty: ItemProperty[]
  @Consume buttonItemsSelected: boolean[]
  @State pressArray: boolean[] = Array.from({ length: MAX_ITEM_COUNT }, (: Object, index) => false)
  @State hoverColorArray: HoverColorProperty[] = Array.from({
    length: MAX_ITEM_COUNT
  }, (: Object, index) => new HoverColorProperty())
  @State buttonWidth: number[] = Array.from({ length: MAX_ITEM_COUNT }, (: Object, index) => 0)
  @State buttonHeight: number[] = Array.from({ length: MAX_ITEM_COUNT }, (: Object, index) => 0)
  @State marquee: boolean = false
  private buttonItemsRealHeight: number[] = Array.from({ length: MAX_ITEM_COUNT }, (: Object, index) => 0)
  private groupId: string = util.generateRandomUUID(true)

  onButtonItemsSizeChange() {
    this.buttonItemsSize.forEach((value, index) => {
      this.buttonWidth[index] = value.width as number
      this.buttonHeight[index] = value.height as number
    })
  }

  changeSelectedIndexes(buttonsLength: number) {
    if (this.optionsArray.changeStartIndex === void 0 || this.optionsArray.deleteCount === void 0 ||
      this.optionsArray.addLength === void 0) {
      return
    }
    if (!(this.options.multiply ?? false)) {
      // Single-select
      if (this.selectedIndexes[0] === void 0) {
        return
      }
      if (this.selectedIndexes[0] < this.optionsArray.changeStartIndex) {
        return
      }
      if (this.optionsArray.changeStartIndex + this.optionsArray.deleteCount > this.selectedIndexes[0]) {
        if (this.options.type === ‘tab’) {
          this.selectedIndexes[0] = 0
        } else if (this.options.type === ‘capsule’) {
          this.selectedIndexes = []
        }
      } else {
        this.selectedIndexes[0] = this.selectedIndexes[0] - this.optionsArray.deleteCount + this.optionsArray.addLength
      }
    } else {
      // Multi-select
      let saveIndexes = this.selectedIndexes
      for (let i = 0; i < this.optionsArray.deleteCount; i++) {
        let deleteIndex = saveIndexes.indexOf(this.optionsArray.changeStartIndex)
        let indexes = saveIndexes.map(value => this.optionsArray.changeStartIndex &&
          (value > this.optionsArray.changeStartIndex) ? value - 1 : value)
        if (deleteIndex !== -1) {
          indexes.splice(deleteIndex, 1)
        }
        saveIndexes = indexes
      }
      for (let i = 0; i < this.optionsArray.addLength; i++) {
        let indexes = saveIndexes.map(value => this.optionsArray.changeStartIndex &&
          (value >= this.optionsArray.changeStartIndex) ? value + 1 : value)
        saveIndexes = indexes
      }
      this.selectedIndexes = saveIndexes
    }

  }

  changeFocusIndex(buttonsLength: number) {
    if (this.optionsArray.changeStartIndex === void 0 || this.optionsArray.deleteCount === void 0 ||
      this.optionsArray.addLength === void 0) {
      return
    }
    if (this.focusIndex === -1) {
      return
    }
    if (this.focusIndex < this.optionsArray.changeStartIndex) {
      return
    }
    if (this.optionsArray.changeStartIndex + this.optionsArray.deleteCount > this.focusIndex) {
      this.focusIndex = 0
    } else {
      this.focusIndex = this.focusIndex - this.optionsArray.deleteCount + this.optionsArray.addLength
    }

  }

  onOptionsArrayChange() {
    if (this.options === void 0 || this.options.buttons === void 0) {
      return
    }
    let buttonsLength = Math.min(this.options.buttons.length, this.buttonItemsSize.length)
    if (this.optionsArray.changeStartIndex !== void 0 && this.optionsArray.deleteCount !== void 0 &&
      this.optionsArray.addLength !== void 0) {
      this.changeSelectedIndexes(buttonsLength)
      this.changeFocusIndex(buttonsLength)
      this.optionsArray.changeStartIndex = void 0
      this.optionsArray.deleteCount = void 0
      this.optionsArray.addLength = void 0
    }
  }

  onOptionsChange() {
    if (this.options === void 0 || this.options.buttons === void 0) {
      return
    }
    this.calculateBorderRadius()
  }

  aboutToAppear() {
    for (let index = 0; index < this.buttonItemsRealHeight.length; index++) {
      this.buttonItemsRealHeight[index] = 0
    }
  }

  private getBorderRadius(index: number): LocalizedBorderRadiuses {
    let borderRadius: LocalizedBorderRadiuses = this.buttonBorderRadius[index]
    if (this.options.type === ‘capsule’ && this.buttonItemsSelected[this.focusIndex] && borderRadius.topStart) {
      borderRadius.topStart = LengthMetrics.vp(borderRadius.topStart.value + 4)
      borderRadius.topEnd = LengthMetrics.vp(borderRadius.topStart.value + 4)
      borderRadius.bottomStart = LengthMetrics.vp(borderRadius.topStart.value + 4)
      borderRadius.bottomEnd = LengthMetrics.vp(borderRadius.topStart.value + 4)
    }
    return borderRadius
  }

  @Builder
  focusStack(index: number) {
    Stack() {
      Stack()
        .direction(this.options.direction)
        .borderRadius(this.getBorderRadius(index))
        .size({
          width: this.options.type === ‘capsule’ && this.buttonItemsSelected[this.focusIndex] ? this.buttonWidth[index] + 8 : this.buttonWidth[index],
          height: this.options.type === ‘capsule’ && this.buttonItemsSelected[this.focusIndex] ? this.buttonHeight[index] + 8 : this.buttonHeight[index]
        })
        .borderColor(segmentButtonTheme.FOCUS_BORDER_COLOR)
        .borderWidth(2)
    }
    .direction(this.options.direction)
    .size({ width: 1, height: 1 })
    .align(Alignment.Center)
  }

  calculateBorderRadius() {
    let borderRadiusArray: LocalizedBorderRadiuses[] = Array.from({
      length: MAX_ITEM_COUNT
    }, (: Object, index): LocalizedBorderRadiuses => {
      return {
        topStart: LengthMetrics.vp(0),
        topEnd: LengthMetrics.vp(0),
        bottomStart: LengthMetrics.vp(0),
        bottomEnd: LengthMetrics.vp(0)
      }
    })
    for (let index = 0; index < this.buttonBorderRadius.length; index++) {
      let halfButtonItemsSizeHeight = this.buttonItemsSize[index].height as number / 2
      if (this.options.type === ‘tab’ || !(this.options.multiply ?? false)) {
        borderRadiusArray[index].topStart = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
        borderRadiusArray[index].topEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
        borderRadiusArray[index].bottomStart = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
        borderRadiusArray[index].bottomEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
      } else {
        if (index === 0) {
          borderRadiusArray[index].topStart = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
          borderRadiusArray[index].topEnd = LengthMetrics.vp(0)
          borderRadiusArray[index].bottomStart = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
          borderRadiusArray[index].bottomEnd = LengthMetrics.vp(0)
        } else if (this.options.buttons && index === Math.min(this.options.buttons.length,
          this.buttonItemsSize.length) - 1) {
          borderRadiusArray[index].topStart = LengthMetrics.vp(0)
          borderRadiusArray[index].topEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
          borderRadiusArray[index].bottomStart = LengthMetrics.vp(0)
          borderRadiusArray[index].bottomEnd = LengthMetrics.vp(this.options.iconTextRadius ?? halfButtonItemsSizeHeight)
        } else {
          borderRadiusArray[index].topStart = LengthMetrics.vp(0)
          borderRadiusArray[index].topEnd = LengthMetrics.vp(0)
          borderRadiusArray[index].bottomStart = LengthMetrics.vp(0)
          borderRadiusArray[index].bottomEnd = LengthMetrics.vp(0)
        }
      }
    }
    this.buttonBorderRadius = borderRadiusArray
  }

  build() {
    if (this.optionsArray !== void 0 && this.optionsArray.length > 1) {
      Row({ space: 1 }) {
        ForEach(this.optionsArray, (item: SegmentButtonItemOptions, index) => {
          if (index < MAX_ITEM_COUNT) {
            Stack() {
              PressAndHoverEffect({
                pressIndex: index,
                colorProperty: this.hoverColorArray[index],
                press: this.pressArray[index],
                options: this.options,
              })
              SegmentButtonItem({
                selectedIndexes: $selectedIndexes,
                focusIndex: this.focusIndex,
                index: index,
                itemOptions: item,
                options: this.options,
                property: this.buttonItemProperty[index],
                groupId: this.groupId,
                marquee: this.marquee
              })
                .onSizeChange((, newValue) => {
                  // Calculate height of items
                  this.buttonItemsRealHeight[index] = newValue.height as number
                  let maxHeight = Math.max(…this.buttonItemsRealHeight.slice(0, this.options.buttons ?
                  this.options.buttons.length : 0))
                  for (let index = 0; index < this.buttonItemsSize.length; index++) {
                    this.buttonItemsSize[index] = { width: this.buttonItemsSize[index].width, height: maxHeight }
                  }
                  this.calculateBorderRadius()
                })
            }
            .direction(this.options.direction)
            .borderRadius(this.buttonBorderRadius[index])
            .scale({
              x: this.options.type === ‘capsule’ && (this.options.multiply ?? false) ? 1 : this.zoomScaleArray[index],
              y: this.options.type === ‘capsule’ && (this.options.multiply ?? false) ? 1 : this.zoomScaleArray[index]
            })
            .layoutWeight(1)
            .onSizeChange((, newValue) => {
              this.buttonItemsSize[index] = { width: newValue.width, height: this.buttonItemsSize[index].height }
              //measure position
              if (newValue.width) {
                this.buttonItemsPosition[index] = {
                  x: Number.parseFloat(this.options.componentPadding.toString()) +
                    (Number.parseFloat(newValue.width.toString()) + 1) * index,
                  y: Number.parseFloat(this.options.componentPadding.toString())
                }
              }
            })
            .stateStyles({
              normal: {
                .overlay(undefined)
              },
              focused: {
                .overlay(this.focusStack(index), {
                  align: Alignment.Center
                })
              }
            })

            //Focus trigger event
            .onClick(()=>{

            })
            .focusable(true)
            .onFocus(() => {
              this.focusIndex = index;
              if (getNumberByResource($r(‘sys.float.segment_marquee’)) === 0) {
                this.marquee = true;
              } else {
                this.marquee = false;
              }
            })
            .onTouch((event: TouchEvent) => {
              if (event.source !== SourceType.TouchScreen) {
                return
              }
              if (event.type === TouchType.Down) {
                animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => {
                  this.zoomScaleArray[index] = 0.95
                })
              } else if (event.type === TouchType.Up) {
                animateTo({ curve: curves.interpolatingSpring(10, 1, 410, 38) }, () => {
                  this.zoomScaleArray[index] = 1
                })
              }
            })
            .onHover((isHover: boolean) => {
              if (isHover) {
                animateTo({ duration: 250, curve: Curve.Friction }, () => {
                  this.hoverColorArray[index].hoverColor = (segmentButtonTheme.HOVER_COLOR)
                })
              } else {
                animateTo({ duration: 250, curve: Curve.Friction }, () => {
                  this.hoverColorArray[index].hoverColor = Color.Transparent
                })
              }
            })
            .onMouse((event: MouseEvent) => {
              switch (event.action) {
                case MouseAction.Press:
                  animateTo({ curve: curves.springMotion(0.347, 0.99) }, () => {
                    this.zoomScaleArray[index] = 0.95
                  })
                  animateTo({ duration: 100, curve: Curve.Sharp }, () => {
                    this.pressArray[index] = true
                  })
                  break;
                case MouseAction.Release:
                  animateTo({ curve: curves.springMotion(0.347, 0.99) }, () => {
                    this.zoomScaleArray[index] = 1
                  })
                  animateTo({ duration: 100, curve: Curve.Sharp }, () => {
                    this.pressArray[index] = false
                  })
                  break;
              }
            })
          }
        })
      }
      .direction(this.options.direction)
      .focusScopeId(this.groupId, true)
      .padding(segmentButtonTheme.SEGMENT_BUTTON_PADDING ||  2)
      .onSizeChange((_, newValue) => {
        this.componentSize = { width: newValue.width, height: newValue.height }
      })
    }
  }
}