探索HarmonyOS开发—Slider滑动条组件

Slider

Slider 滑块组件

Slider({
   min: 0,   // 最小值
   max: 350, // 最大值
   value: 30, // 当前值
   step:10, // 滑动步长
   style:SliderStyle.OutSet, // Inset 滑块的位置
   direction:Axis.Horizontal, // Vertical
   reverse:false // 是否反向滑动
})

style属性可以控制滑块在整个滑块条的位置

OutSet

InSet

direction属性可以控制滑块条的方向为竖着的还是横着的展示的效果就是水平和垂直不同的方向。

reverse属性控制滑块条的方向 false就为正向，true为反向

属性

      Slider({
          min: 0,   // 最小值
          max: 350, // 最大值
          value: 30, // 当前值
          step:10, // 滑动步长
          style:SliderStyle.InSet, // Inset 滑块的位置
          direction:Axis.Horizontal, // Vertical
          reverse:false // 是否反向滑动
        })
          .width('80%')
          .showTips(true)
          .blockColor('#ff0000')
          .onChange(()=>{

          })

slider滑块组件也具备正常的宽度颜色等属性。也可以出发事件。

showTips属性可以决定是否展示value百分比提示。为布尔值。

.blockColor属性可以调节滑块的颜色

使用slider组件来完成图片大小的调节

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 300
  build() {
    Row() {
      Column() {
        Image($r('app.media.hongmeng'))
          .width(this.imageWidth)
          .margin(10)
        Slider({
          min: 0,   // 最小值
          max: 350, // 最大值
          value: 30, // 当前值
          step:10, // 滑动步长
          style:SliderStyle.InSet, // Inset 滑块的位置
          direction:Axis.Horizontal, // Vertical
          reverse:false // 是否反向滑动
        })
          .width('80%')
          .showTips(true)
          .blockColor('#ff0000')
          .trackThickness(40)  // 调节滑块的高度
          .onChange((val)=>{
            this.imageWidth = val
          })
      }

      .width('100%')
    }
    .height('100%')
  }
}