HarmonyOS鸿蒙Next中Slider组件设置changemode为end之后，外部改变value的值，但是滑块不动

Index页面：

import { IndexViewModel, IndexViewState } from './IndexViewModel';

@Entry
@ComponentV2
struct Index {
  private viewModel: IndexViewModel = new IndexViewModel();

  @Local private viewState: IndexViewState = this.viewModel.viewState;

  aboutToAppear(): void {
    this.viewModel.pageInit();
  }

  build() {
    Column({ space: 15 }) {
      Text(`当前的值为：${this.viewState.value}`);

      Row() {
        Button("-")
          .onClick(() => {
            if (this.viewState.value > this.viewState.minLevel) {
              this.viewState.value--;
            }
          });
        Button("+")
          .onClick(() => {
            if (this.viewState.value < this.viewState.maxLevel) {
              this.viewState.value++;
            }
          });
      }
      .width("75%")
      .justifyContent(FlexAlign.SpaceBetween);

      PluseSlider({
        maxLevel: this.viewState.maxLevel,
        minLevel: this.viewState.minLevel,
        stepLen: 10,
        currentValue: this.viewState.value!!, // 双向绑定 UI 与 Model 的数据确保一致
        onPulseProgressLevelChange: (value: number, mode: SliderChangeMode) => {
          this.viewModel.onValueChange(value, mode);
        }
      });
    }
    .width("100%")
    .height("100%")
    .alignItems(HorizontalAlign.Center)
    .padding(20)
    .padding({ top: 30 });
  }
}


@ComponentV2
export struct PluseSlider {
  @Param maxLevel: number = 0;

  @Param minLevel: number = 0;

  @Param stepLen: number = 0;

  @Require
  @Param currentValue: number;

  @Event
  $currentValue: (value: number) => void;

  @Event
  onPulseProgressLevelChange: (value: number, mode: SliderChangeMode) => void;

  @Local private stepValue: number = 0;

  aboutToAppear() {
    this.stepValue = this.maxLevel / this.stepLen;
  }

  build() {
    Column() {
      Stack() {
        Slider({
          min: this.minLevel,
          max: this.stepValue,
          value: 0,
          style: SliderStyle.InSet
        })
          .showSteps(true)
          .width("100%");

        Slider({
          min: this.minLevel,
          max: this.maxLevel,
          value: this.currentValue,
          style: SliderStyle.InSet
        })
          .trackColor(Color.Transparent)
          .blockSize({
            width: 20,
            height: 20
          })
          .trackThickness(24)
          .width("100%")
          .sliderInteractionMode(SliderInteraction.SLIDE_ONLY)
          .onChange((value, mode) => {
            // 确保 UI 和 父组件的数据一致
            this.$currentValue(value);
            // 执行校验函数
            this.onPulseProgressLevelChange(value, mode);
          });
      };

      Button("查看当前值").onClick(() => {
        console.log("查看当前数据：currentValue：{}", this.currentValue);
      });
    }
    .width("100%");
  }
}

IndexViewModel页面：

@ObservedV2
export class IndexViewState {
  @Trace maxLevel: number = 60;
  @Trace minLevel: number = 0;
  @Trace value: number = 15;
}


export class IndexViewModel {
  public viewState: IndexViewState = new IndexViewState();

  public async pageInit() {

  }

  private begin: number = 0;
  private end: number = 0;

  public changeValue(value: number) {
    this.viewState.value = value;
  }

  public onValueChange(value: number, mode: SliderChangeMode) {
    if (mode === SliderChangeMode.Begin) {
      this.begin = value;
    }
    if (mode === SliderChangeMode.Moving) {
      this.changeValue(value);
    }
    if (mode === SliderChangeMode.End) {
      this.end = value;
      if (this.end === this.begin) {
        return;
      } else if (this.end - this.begin > 20 && this.end >= 30) {
        // 如果滑动距离超过20且终点大于30，则回退到起始位置
        // 此时由于 Moving 过程中 value 已经变了，这里设置 begin 会触发 UI 重新渲染
        this.changeValue(this.begin)
      } else {
        this.changeValue(this.end);
      }
    }
  }
}