HarmonyOS 开发基础（六）Slider

HarmonyOS 开发基础（六）Slider

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Slider：ArkUI 的基础组件 滑动条组件
        // options 参数：Slider 基础设置
        Slider({
          // 最小值
          min: 20,
          // 最大值
          max: 200,
          // 当前值
          value: 50,
          // 步长
          step: 10,
          // 样式，SliderStyle.InSet：条型，SliderStyle.OutSet：线型
          style: SliderStyle.InSet,
          // Axis.Horizontal：横向展示，Axis.Vertical：纵向展示
          direction: Axis.Horizontal,
          // 是否反向滑动
          reverse: false
        })
          // width：属性方法，设置组件宽度
          .width('80%')
          // showSteps：属性方法，是否展示步长点
          .showSteps(true)
          // showTips：属性方法，滑动时是否展示 value 百分比提示
          .showTips(true)
          // blockColor：属性方法，设置滑块颜色
          .blockColor('#fffff')
          // margin：属性方法，设置外边距
          .margin({top: 30})
          // onChange：组件事件，当滑动时触发
          .onChange(value => {
            console.log(value.toString())
          })
      }
    }
  }
}