211.HarmonyOS NEXT系列教程之 TabsRaisedCircle组件核心实现解析

@Component
export struct TabsRaisedCircle {
  @Link @Watch("getAnimateSelectIndex") selectIndex: number;
  @State animateSelectIndex: number = 0;
  @Prop tabHeight: number = 60;
  @Link tabsMenu: TabMenusInterfaceIRequired[];
  @Prop tabsBgColor: Color = Color.White;
  @Prop tabsSelectBgColor: string = "rgba(92, 187, 183,1)";
  @Prop tabsFontColor: Color = Color.Black;
  @Prop tabsSelectFontColor: Color = Color.Black;
  @State chamfer: ChamferInfo | undefined = undefined;
  @State selectImageInfo: RaisedSelectImageInfo | undefined = undefined;
}

build() {
  RelativeContainer() {
    ForEach(this.tabsMenu, (item: TabMenusInterfaceIRequired, index: number) => {
      this.TabItem(item, index)
    })
    if (this.chamfer) {
      TabsRaisedCircleSelect({
        tabHeight: this.tabHeight,
        selectIndex: this.selectIndex,
        chamfer: this.chamfer,
        selectBodyId: this.selectBodyId,
        tabItemId: this.tabItemId,
        tabsBgColor: this.tabsBgColor,
        tabsSelectBgColor: this.tabsSelectBgColor,
      })
    }
  }
  .width("100%")
  .height(this.tabHeight)
  .backgroundColor(this.tabsBgColor)
  .id(this.tabsId)
}

@Builder
TabItem(item: TabMenusInterfaceIRequired, index: number) {
  Column() {
    if (item.image && this.chamfer) {
      Image(getImageUrl(item as TabMenusInterfaceIRequired, index, this.selectIndex))
        .size({
          width: this.chamfer.circleDiameter / 2,
          height: this.chamfer.circleDiameter / 2
        })
        .interpolation(ImageInterpolation.High)
        .offset({
          y: this.selectIndex === index && this.animateSelectIndex === index ? 
             -(this.getCountOffsetY()) : 0,
        })
        .id(`${this.selectImageId}${index}`)
    }
    Text(item.text)
      .fontColor(this.selectIndex === index ? 
        (item.tabsSelectFontColor || this.tabsSelectFontColor) :
        (item.tabsFontColor || this.tabsFontColor))
  }
  .onClick(() => {
    animateTo({
      duration: this.animateTime,
    }, () => {
      this.selectIndex = index
    })
  })
  .width(100 / this.tabsMenu.length + "%")
  .height("100%")
  .justifyContent(FlexAlign.Center)
  .id(`${this.tabItemId}${index}`)
}

getCountOffsetY() {
  if (this.selectImageInfo && this.chamfer) {
    return this.selectImageInfo.getCenterOffsetY() -
      (this.chamfer.circleRadius - this.chamfer.circleOffsetY)
  }
  return 0
}