🎯 案例集合Tabs：自定义tabs突出（凸出）显示，异构，出血(边缘平滑)

🌍 案例集合Tabs

🚪 最近开启了学员班级点我欢迎加入

🏷️ 效果图

📖 参考

• 球体左右的圆滑部分借鉴了官方Case

• 浅谈适配沉浸式页面

• 圆球左右圆滑形状裁剪：clipShape

• 自定义tabs突出（凸出）显示，异构，出血

🧩 拆解

import { common } from "@kit.AbilityKit"
import { PathShape, window } from "@kit.ArkUI"

/**
 * 安全区高度
 */
interface AvoidArea {
  topRectHeight: number
  bottomRectHeight: number
}

/**
 * 凸起变化平滑属性
 */
interface BallSmooth {
  radialGradient: RadialGradientOptions
  clipShape: PathShape
  position: Position
}

/**
 * 安全类型边距枚举
 * statusBarType 状态栏
 * navBarType 导航栏
 */
const statusBarType = window.AvoidAreaType.TYPE_SYSTEM
const navBarType = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR

/**
 * tabs数据
 */
const mockData: string[] = ['购物', '体育', '服装', '军事']

@Component
export struct TabHighlightedSmoothCase {
  /**
   * UI上下文
   */
  private context = this.getUIContext()?.getHostContext() as common.UIAbilityContext
  /**
   * 窗口对象
   */
  private windowClass = this.context.windowStage.getMainWindowSync()
  /**
   * 当前选中的Tabs下标
   */
  @State tabsCurSelectIdx: number = 0
  /**
   * 当前选中的Tabs下标（还未切换动画前获取）
   */
  @State animationStartIdx: number = 0
  /**
   * 安全区高度对象（状态栏、导航栏）
   */
  @State avoidArea: AvoidArea = { topRectHeight: 0, bottomRectHeight: 0 }
  /**
   * tabs | ball 颜色
   */
  private tabsAndBallColor: ResourceColor = Color.Gray
  /**
   * 凸起变化平滑裁剪
   */
  private vp2pxWidth: number = this.getUIContext().vp2px(44)
  private vp2pxHeight: number = this.getUIContext().vp2px(40)

  aboutToAppear(): void {
    this.windowClass.setWindowLayoutFullScreen(true)
    this.windowClass.on('avoidAreaChange', this.onAvoidAreaChange)
    this.setAvoidArea()
  }

  aboutToDisappear(): void {
    this.windowClass.setWindowLayoutFullScreen(false)
    this.windowClass.off('avoidAreaChange', this.onAvoidAreaChange)
  }

  /**
   * 设置状态栏和导航栏避让区域 && 监听不同设备避让区域的变化
   */
  setAvoidArea() {
    const statusBarArea = this.windowClass.getWindowAvoidArea(statusBarType)
    this.avoidArea.topRectHeight = statusBarArea.topRect.height
    const navBarArea = this.windowClass.getWindowAvoidArea(navBarType)
    this.avoidArea.bottomRectHeight = navBarArea.bottomRect.height
  }

  onAvoidAreaChange = (data: window.AvoidAreaOptions) => {
    if (data.type === statusBarType) {
      this.avoidArea.topRectHeight = data.area.topRect.height
    } else if (data.type === navBarType) {
      this.avoidArea.bottomRectHeight = data.area.bottomRect.height
    }
  }

  /**
   * 自定义tab
   * @param label
   * @param idx
   */
  @Builder
  tabBuilder(label: string, idx: number) {
    if (idx === 2) {
      Text().width(80)
    }

    Column({ space: 5 }) {
      Text(label)
        .fontSize(16)
        .fontColor(this.animationStartIdx === idx ? Color.White : Color.Black)
        .fontWeight(this.animationStartIdx === idx ? FontWeight.Medium : FontWeight.Normal)

      Image($r('app.media.startIcon'))
        .syncLoad(true)
        .draggable(false)
        .width(20)
        .height(20)
    }
    .onClick(() => {
      this.tabsCurSelectIdx = this.animationStartIdx = idx
    })
    .layoutWeight(1)
  }

  /**
   * 左右两边凸起球圆滑的图像
   * @param param
   */
  @Builder
  ballSmoothBuilder(param: BallSmooth) {
    Column()
      .width(44)
      .height(40)
      .radialGradient(param.radialGradient)
      .clipShape(param.clipShape) // 关键：路径裁剪
      .position(param.position)
      .zIndex(-1)
  }

  /**
   * 凸起的球
   */
  @Builder
  raisedBallBuilder() {
    Row() {
      this.ballSmoothBuilder({
        radialGradient: {
          center: [0, 0],
          radius: 30,
          colors: [[Color.Transparent, 0.0], [Color.Transparent, 1], [this.tabsAndBallColor, 1]]
        },
        clipShape: new PathShape({
          commands: `M0 0 L0 ${this.vp2pxHeight} L${this.vp2pxWidth} ${this.vp2pxHeight} Z`
        }),
        position: { x: -9, y: -10 }
      })

      Column()
        .height(80)
        .aspectRatio(1)
        .borderRadius(40)
        .backgroundColor(this.tabsAndBallColor)

      this.ballSmoothBuilder({
        radialGradient: {
          center: [44, 0],
          radius: 30,
          colors: [[Color.Transparent, 0.0], [Color.Transparent, 1], [this.tabsAndBallColor, 1]]
        },
        clipShape: new PathShape({
          commands: `M0 ${this.vp2pxHeight} L${this.vp2pxWidth} 0L${this.vp2pxWidth} ${this.vp2pxHeight} Z`
        }),
        position: { x: 45, y: -10 }
      })

      Text('+')
        .width(60)
        .aspectRatio(1)
        .fontSize(40)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Regular)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Blue)
        .borderRadius('50%')
        // 绝对定位
        //   将组件的左上角顶点定位到父容器水平方向的中心点（即X轴50%位置）。此时组件左侧与父容器中心线对齐，未实现视觉居中
        .position({ x: '50%', y: 10 })
        // 反向平移
        //   将组件沿X轴向左平移自身宽度的50%。通过负值偏移，组件的中心点移动到原定位点（父容器中心线），从而实现水平居中
        .translate({ x: '-50%' })
        .onClick(() => this.getUIContext().getPromptAction().showToast({ message: '添加独有逻辑' }))
    }
    .height(80)
    .aspectRatio(1)
    .justifyContent(FlexAlign.Center)
    // 绝对定位
    //   将组件的左上角顶点定位到父容器水平方向的中心点（即X轴50%位置）。此时组件左侧与父容器中心线对齐，未实现视觉居中
    .position({ x: '50%', y: -25 })
    // 反向平移
    //   将组件沿X轴向左平移自身宽度的50%。通过负值偏移，组件的中心点移动到原定位点（父容器中心线），从而实现水平居中
    .translate({ x: '-50%' })
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Tabs({ index: this.tabsCurSelectIdx }) {
        ForEach(mockData, (item: string) => {
          TabContent() {
            Column() {
              Text(item)
                .fontColor(Color.White)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
            }
            .width('100%')
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .backgroundColor(Color.Brown)
          }
        })
      }
      .barHeight(0)
      .onChange((idx: number) => {
        this.tabsCurSelectIdx = idx
      })
      // 关键：切换动画开始时触发该回调：解决切换tabs延迟的问题
      .onAnimationStart((idx: number, targetIndex: number) => {
        if (idx === targetIndex) {
          return
        }
        this.animationStartIdx = targetIndex
      })

      // 自定义tabs
      Row() {
        ForEach(mockData, (item: string, idx: number) => {
          this.tabBuilder(item, idx)
        })

        this.raisedBallBuilder()
      }
      .width('100%')
      .backgroundColor(this.tabsAndBallColor)
      .padding({ bottom: this.avoidArea.bottomRectHeight + 'px', top: 5 })
    }
    .width('100%')
    .height('100%')
    .padding({ top: this.avoidArea.topRectHeight + 'px' })
  }
}

🌸🌼🌺