HarmonyOS 自定义Slider

有如图所示的Slider组件实现方案吗,可以自定义文本显示进度?

HarmonyOS 自定义Slider  -鸿蒙开发者社区

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

请参考以下代码调整样式和增加其他逻辑:

文档支持:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-slider.md#trackthickness8

const BLOCK_DEFAULT_BORDER_WIDTH = 4;

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

  aboutToAppear(): void {
    //定时器模拟播放进度
    setInterval(() => {
      this.progress++
    }, 1000)
  }

  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));
  }

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

  build() {
    Row() {
      Slider({ direction: Axis.Vertical, value: this.progress})
        .height(this.slideHeight)
        .selectedColor(Color.Green)
        .trackColor('#5a5a5a')
        .trackThickness(10)
        .blockSize({ width: this.blockSize, height: this.blockSize })
        .selectedColor('#FF6103')
        .onChange((value: number, mode: SliderChangeMode) => {
          this.progress = value
          switch (mode) {
            case SliderChangeMode.Moving:
            case SliderChangeMode.Click:
              this.showTip(value);
              break;
            case SliderChangeMode.End:
              this.hideTip();
              break;
          }
        })
      if (this.isTipShow) {
        Text("01:55/02:22")
          .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%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 自定义Slider样式
392浏览 • 1回复 待解决
HarmonyOS Slider滑动自定义tips
28浏览 • 1回复 待解决
HarmonyOS Slider无法自定义滑轨样式
24浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1179浏览 • 1回复 待解决
HarmonyOS 定义自定义组件
75浏览 • 1回复 待解决
HarmonyOS 自定义键盘
289浏览 • 1回复 待解决
HarmonyOS 自定义UA
43浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
268浏览 • 1回复 待解决
HarmonyOS 自定义控件实现
32浏览 • 1回复 待解决
HarmonyOS 如何自定义相机
29浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
399浏览 • 1回复 待解决
HarmonyOS 自定义全屏dialog
30浏览 • 1回复 待解决
HarmonyOS 地图自定义marker
57浏览 • 1回复 待解决
HarmonyOS 自定义拍照功能
22浏览 • 1回复 待解决
HarmonyOS 如何自定义注解?
284浏览 • 1回复 待解决