HarmonyOS鸿蒙Next中Slider滑动禁用

HarmonyOS鸿蒙Next中Slider滑动禁用 Slider滑块滑动到最右边还能重新往左滑动，如何禁用滑动

6 回复

【背景知识】 slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考slider。

【解决方案】
可通过change事件，监听滑动值的变化，并通过组件的禁用控制属性enabled，根据APP具体的业务场景定制slider是否可滑动。

// ... 业务代码
Slider({
    value: this.outSetValueOne,
    min: 0,
    max: 100,
    style: SliderStyle.OutSet
})
.enabled(this.isEnable)
.onChange((value: number, mode: SliderChangeMode) => {
    console.info('value:' + value + 'mode:' + mode.toString());
    // ... 业务代码
    this.isEnable = false;
})
// ... 业务代码

更多关于HarmonyOS鸿蒙Next中Slider滑动禁用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry @Component struct MySlider extends Component { private value: number = 0 private max: number = 100 private isDisabled: boolean = false

build() { Slider({ value: this.value, min: 0, max: this.max, onChange: (val: number) => { this.value = val // 当值达到最大值时禁用滑块 if (val === this.max) { this.isDisabled = true } }, disabled: this.isDisabled // 绑定禁用状态 }) } }

强

@Entry
@Component
export default struct test {
  @State outSetValueOne: number = 0;
  @State isEnable: boolean = true;

  build() {
    Column() {
      Slider({
        value: this.outSetValueOne,
        min: 0,
        max: 100,
        style: SliderStyle.OutSet
      })
        .width(200)
        .enabled(this.isEnable)
        .showTips(true)
        .onChange((value: number, mode: SliderChangeMode) => {
          this.outSetValueOne = value;
          if (value === 100) {
            this.isEnable = false;
          }
          console.info('value:' + value + 'mode:' + mode.toString());
        })

      Button('取消禁用').onClick(() => {
        this.isEnable = true;
      })
    }
    .height('80%')
    .width('100%')
  }
}

在HarmonyOS鸿蒙Next中，禁用Slider滑动可以通过设置enabled属性为false来实现。具体代码如下：

Slider({
  enabled: false
})

这样，Slider组件将无法响应用户的滑动操作。

在HarmonyOS Next中，要禁用Slider组件的滑动功能，可以通过设置enabled属性为false来实现。具体实现方式如下：

  1. 在XML布局中：
<Slider
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:enabled="false"
    ... />
  1. 或者在代码中动态设置：
Slider slider = (Slider) findComponentById(ResourceTable.Id_slider);
slider.setEnabled(false);

这样设置后，Slider组件将变为不可交互状态，用户无法再通过滑动来改变其值。如果需要完全禁用特定方向的滑动，可以结合监听滑动事件来实现更精细的控制。

回到顶部