HarmonyOS Slider组件的气泡如何设置一直展示？

Question

我们当前做了一个视频播放器调节倍数的组件，使用了Slider组件，当展示组件时期望在没有滑动组件时也展示气泡 显示当前的倍数，如何实现：未滑动时 气泡不会展示。滑动组件才展示气泡

Answer 1

.showTips(true)设置的气泡未滑动时不会展示，请参考以下自定义slider自带的tips样式

const BLOCK_DEFAULT_BORDER_WIDTH = 4;
@Entry
@Component
struct Test240816180043025 {
  @State isTipShow: boolean = false;
  @State tipsOffset: number = 0;
  private slideHeight: number = 300;
  private blockSize: number = 20;
  private tipHeight: number = 40;
  private hideTipTask?: number;

  private showTip(value: number) {
    this.isTipShow = true
    let percent = Number((value / 100).toFixed(2));
    this.tipsOffset = (this.slideHeight - this.blockSize - BLOCK_DEFAULT_BORDER_WIDTH * 2) * percent -
      (this.tipHeight / 2 - (this.blockSize / 2 + BLOCK_DEFAULT_BORDER_WIDTH));
    console.log("tipsOffset:"+this.tipsOffset)
  }

  private hideTip() {
    clearTimeout(this.hideTipTask)
    this.hideTipTask = setTimeout(() => {
      this.isTipShow = false
    }, 3000)
  }

  build() {
    Row() {
      Slider({ direction: Axis.Vertical, })
        .height(this.slideHeight)
        .selectedColor(Color.Green)
        .trackColor('#5a5a5a')
        .trackThickness(10)
          // .showTips(true)
        .blockSize({ width: this.blockSize, height: this.blockSize })
        .selectedColor('#FF6103')
        .onAppear(()=>{
          this.showTip(0);
        })
        .onChange((value: number, mode: SliderChangeMode) => {
          switch (mode) {
            case SliderChangeMode.Moving:
            case SliderChangeMode.Click:
              this.showTip(value);
              break;
            case SliderChangeMode.End:
              // this.hideTip();
              break;
          }
        })
      if (this.isTipShow) {
        //当Slider为竖直滑动条时，Slider默认宽度为40vp，高度为父容器的高度，滑动条居中显示，上下间距为分别为6vp，若设置padding，padding不会覆盖上下间距。
        Text(Number((this.tipsOffset+6)/(this.slideHeight-this.tipHeight+6*2)*100).toFixed(0)+'%')
          .fontSize(12)
          .height(this.tipHeight)
          .offset({ y: this.tipsOffset })
          .fontColor(Color.White)
          .backgroundColor("#66000000")
          .padding(10)
          .borderRadius(5)
          .hitTestBehavior(HitTestMode.Transparent)
      }
    }.alignItems(VerticalAlign.Top).padding(20).height('100%').width('100%')
  }
}