HarmonyOS 有个页面交互效果 tab 最后一个tab项点击一个浮层，可是这个浮层还要在tab中间按钮的下方，怎么实现？

Question

有个页面交互效果 tab 最后一个tab项点击一个浮层，可是这个浮层还要在tab中间按钮的下方，怎么实现尼，请查看下图，因为tab 点击标签中间有个按钮 这个按钮还要浮层一个浮层面板上面 ，不知道怎么实现

Answer 1

参考大致效果demo

import promptAction from '@ohos.promptAction'

class TabBar {
  title: string
  index: number

  constructor(title: string, index: number) {
    this.title = title
    this.index = index
  }
}

let tabBars: TabBar[] = [
  new TabBar('首页', 0),
  new TabBar('推荐', 1),
  new TabBar('我的', 2),
  new TabBar('我的', 3),
  new TabBar('其他', 4),

]
@Entry
@Component
struct ZTTabsPage {
  @State currentIndex: number = 0; // 当前tab值
  @State index: number = 0; // 判断tabs是否选中
  @State flag: boolean = false;
  private tabsController: TabsController = new TabsController();

  build() {
    Stack({ alignContent: Alignment.Bottom }){
      Column() {
        Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.tabsController }) {
          TabContent() {
            Text('首页的内容').fontSize(30)
          }
          TabContent() {
            Text('推荐的内容').fontSize(30)
          }
          TabContent() {
            Text('发现的内容').fontSize(30)
          }
        }
        .barHeight(0).barBackgroundColor(Color.Green).width('100%').height('92%')

        customBuilder({
          flag:this.flag,
          index:this.index,
          currentIndex:this.currentIndex,
        })

      }.height('100%').width('100%').backgroundColor(Color.Blue)

      ImageCom().zIndex(4)

      if (this.flag){
        Column() {
          Text('模拟弹框')
        }
        .width('100%')
        .height(200)
        .zIndex(2)
        .backgroundColor(Color.Orange)
        .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
        .hitTestBehavior(HitTestMode.None)

      }
    }.height('100%').width('100%')
  }
}
@Component
struct ImageCom{
  build() {
    Image($r('app.media.startIcon')).width(60).height(60)
  }
}

@Component
struct customBuilder{
  @Link flag:boolean
  @Link index:number
  @Link currentIndex:number
  build() {
    Row(){
      ForEach(tabBars, (item: TabBar,index:number) =>{
        if (index===2) {
          Blank().width(1)
        } else {
          Text(item.title)
            .fontColor(this.index === item.index ? '#000' : '#999')
            .fontSize(20)
            .align(Alignment.Center)
            .onClick(() => {
              if (item.index === 4) {
                // this.flag = true
                animateTo({ duration: 1000 }, () => {
                  this.flag = true;
                })
              } else {
                if (this.flag) {
                  this.flag = !this.flag;
                }
                this.currentIndex = item.index
              }
              this.index = item.index
            })
        }
      })
    }.width('100%').justifyContent(FlexAlign.SpaceBetween).height(80)
  }
}