HarmonyOS鸿蒙Next中SLider的tips如何展示字符串

HarmonyOS鸿蒙Next中SLider的tips如何展示字符串 SLider 的tips中，如何展示字符串？

4 回复

【背景知识】

showTips：设置滑动时是否显示气泡提示。

【解决方案】

在ArkTS中，Slider组件的showTips属性用于控制是否显示默认的数值提示气泡。showTips(value: boolean, content?: ResourceStr)，可以在content设置显示的内容。

示例代码如下：

@Entry
@Component
struct SliderExample {
  @State outSetValueOne: number = 40;

  build() {
    Column({ space: 8 }) {
      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true,'显示')
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value;
            console.info('value:' + value + 'mode:' + mode.toString());
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
    }.width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中SLider的tips如何展示字符串的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS的Slider组件中，可以通过设置Slider的tips属性来展示字符串提示

@Entry
@Component
struct SliderTipsExample {
  @State currentValue: number = 50

  build() {
    Column({ space: 20 }) {
      Text('Slider数值提示示例')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      // 基础字符串提示
      Slider({
        min: 0,
        max: 100,
        value: this.currentValue,
        step: 1,
        style: SliderStyle.OutSet
      })
        .showTips(true)
        .trackThickness(8)
        .onChange((value: number, mode: SliderChangeMode) => {
          this.currentValue = value
        })
        .tips('当前值: ' + this.currentValue.toString())

      // 自定义提示内容
      Slider({
        min: 0,
        max: 200,
        value: 100,
        step: 10,
        style: SliderStyle.InSet
      })
        .showTips(true)
        .trackThickness(6)
        .onChange((value: number) => {
          console.info('Slider值变化: ' + value)
        })
        .tips((value: number) => {
          return `进度: ${value}/200`
        })

      Text('当前数值: ' + this.currentValue)
        .fontSize(16)
        .fontColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}

在HarmonyOS Next中，Slider组件通过SliderStyle设置提示文本格式。使用sliderStyle: SliderStyle.OutSet时，可通过onChange回调获取当前值并转换为字符串显示。示例代码片段如下：

Slider({
  value: this.value,
  style: SliderStyle.OutSet
})
.onChange(value => {
  // 将数值映射为字符串显示
  this.tipText = this.getValueString(value);
})

提示文本内容需通过数据绑定实时更新，具体字符串映射逻辑需在getValueString方法中自定义实现。

在HarmonyOS Next中，可以通过设置Slider组件的valueTipFormatter属性来自定义tips显示的字符串。该属性接收一个函数，函数参数为当前滑块值，返回需要展示的字符串。

示例代码：

Slider({
  min: 0,
  max: 100,
  value: 50,
  valueTipFormatter: (value: number) => {
    return `当前进度：${value}%`
  }
})

这样设置后，滑块拖动时tips就会显示"当前进度：X%"格式的字符串。

回到顶部