华为仓颉鸿蒙next原生UI基础组件Slider

滑动条组件，通常用于用快速调节设置值，如音量调节、亮度调节等应用场景。
说明
Slider暂不支持混合页面场景。
子组件
无
构造函数
init(Float64, Float64, Float64, Float64, SliderStyle, Axis, Bool)
public init( value!: Float64 = 0.0,
min!: Float64 = 0.0,
max!: Float64 = 100.0,
step!: Float64 = 1.0,
style!: SliderStyle = SliderStyle.OutSet,
direction!: Axis = Axis.Horizontal,
reverse!: Bool = False)说明
• ​
• 当value小于min值时，会取min值；当value大于max值时，会取max值
• 当min值大于等于max值时，此时无法滑动。
•
参数名
参数类型
必填
默认值
描述
value
Float64
否
0.0
当前进度值。
min
Float64
否
0.0
设置最小值。
max
Float64
否
100.0
设置最大值。
step
Float64
否
1.0
设置滑动条滑动步长。
说明：
当step<=0时，取max-min的值。
style
SliderStyle
否
SliderStyle.OutSet
设置滑动条的滑块样式。
direction
Axis
否
Axis.Horizontal
设置滑动条滑动方向为水平或竖直方向。
reverse
Bool
否
false
设置滑动条取值范围是否反向。
说明：
设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动。
设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。
函数
blockColor(Color)
public func blockColor(value: Color): This根据指定的Color设置滑块的颜色。
参数名
参数类型
必填
默认值
描述
value
Color
是
Color(0xFFFFFF)
滑块的颜色。
blockColor(UInt32)
public func blockColor(value: UInt32): This根据指定的色值设置滑块的颜色。
参数名
参数类型
必填
默认值
描述
value
UInt32
是
0xFFFFFF
滑块的颜色。
blockColor(CJResource)
public func blockColor(value: CJResource): This根据指定的资源文件设置滑块的颜色。
参数名
参数类型
必填
默认值
描述
value
CJResource
是

滑块的颜色。
trackColor(Color)
public func trackColor(value: Color): This根据指定的Color设置滑轨的背景颜色。
参数名
参数类型
必填
默认值
描述
value
Color
是
Color(0xDBDBDB)
滑轨的背景颜色。
trackColor(UInt32)
public func trackColor(value: UInt32): This根据指定的色值设置滑轨的背景颜色。
参数名
参数类型
必填
默认值
描述
value
UInt32
是
0xDBDBDB
滑轨的背景颜色。
trackColor(CJResource)
public func trackColor(value: CJResource): This根据指定的资源文件设置滑轨的背景颜色。
参数名
参数类型
必填
默认值
描述
value
CJResource
是

滑轨的背景颜色。
selectedColor(Color)
public func selectedColor(value: Color): This根据指定的Color设置滑轨已滑动部分的颜色。
参数名
参数类型
必填
默认值
描述
value
Color
是
Color(0x007DFF)
滑轨已滑动部分的颜色。
selectedColor(UInt32)
public func selectedColor(value: UInt32): This根据指定的色值设置滑轨已滑动部分的颜色。
参数名
参数类型
必填
默认值
描述
value
UInt32
是
0x007DFF
滑轨已滑动部分的颜色。
selectedColor(CJResource)
public func selectedColor(value: CJResource): This根据指定的资源文件设置滑轨已滑动部分的颜色。
参数名
参数类型
必填
默认值
描述
value
CJResource
是

滑轨已滑动部分的颜色。
showSteps(Bool)
public func showSteps(value: Bool): This设置当前是否显示步长刻度值。
参数名
参数类型
必填
默认值
描述
value
Bool
是
false
当前是否显示步长刻度值。
showTips(Bool)
public func showTips(value: Bool): This设置滑动时是否显示气泡提示。
参数名
参数类型
必填
默认值
描述
value
Bool
是
false
滑动时是否显示气泡提示。
trackThickness(Length)
public func trackThickness(value: Length): This根据指定的Length设置滑轨的粗细。设置为小于等于0的值时，取默认值。
参数名
参数类型
必填
默认值
描述
value
Length
是

滑轨的粗细。
trackThickness(Int64)
public func trackThickness(value: Int64): This根据指定的整数值设置滑轨的粗细。设置为小于等于0的值时，取默认值。
参数名
参数类型
必填
默认值
描述
value
Int64
是

滑轨的粗细。
trackThickness(Float64)
public func trackThickness(value: Float64): This根据指定的浮点值设置滑轨的粗细。设置为小于等于0的值时，取默认值。
参数名
参数类型
必填
默认值
描述
value
Float64
是

滑轨的粗细。
minLabel(Float64)
public func minLabel(value: Float64): This根据指定的浮点值设置可滑动的最小值。
参数名
参数类型
必填
默认值
描述
value
Float64
是
0.0
最小值。
maxLabel(Float64)
public func maxLabel(value: Float64): This根据指定的浮点值设置可滑动的最大值。
参数名
参数类型
必填
默认值
描述
value
Float64
是
100.0
最大值。
枚举说明
SliderStyle
Slider组件滑块与滑轨显示样式枚举。
名称
描述
OutSet
滑块在滑轨上
InSet
滑块在滑轨内
Axis
Slider组件滑动条滑动方向枚举。
名称
描述
Vertical
竖直方向
Horizontal
水平方向
SliderChangeMode
Slider组件拖动或点击事件枚举。
名称
描述
Begin
用户开始拖动滑块
Moving
用户拖动滑块中
End
用户结束拖动滑块
Click
用户点击滑动条使滑块位置移动
事件
onChange((Float64, SliderChangeMode)->Unit)
public func onChange(callback: (Float64, SliderChangeMode)->Unit): ThisSlider拖动或点击时触发事件回调。
参数名
参数类型
描述
onChcallbackange
(Float64, SliderChangeMode)->Unit
Slider滑动时触发事件回调。
onChange(()->Unit)
public func onChange(callback: ()->Unit): ThisSlider拖动或点击时触发事件回调。
参数名
参数类型
描述
callback
()->Unit
Slider滑动时触发事件回调。
通用属性/通用事件
通用属性：不支持触摸热区设置。
通用事件：仅支持OnAppear, OnDisAppear。
示例代码
package ohos_app_cangjie_entry

internal import ohos.state_manage.SubscriberManager
internal import ohos.state_manage.ObservedProperty
import ohos.state_macro_manage.Entry
import ohos.state_macro_manage.Component
import ohos.state_macro_manage.State
import ohos.state_macro_manage.r
import ohos.component.*
import ohos.base.*


@Entry
@Component
class MyView {
  @State var outSetValue: Float64 = 40.0
  @State var inSetValue: Float64 = 40.0
  @State var outVerticalSetValue: Float64 = 40.0
  @State var inVerticalSetValue: Float64 = 40.0

  func build() {
    Column(5) {
      Text("slider out set").fontSize(9).fontColor(0xCCCCCC).width(90.percent)
      Row {
        Slider(
          value: this.outSetValue,
          min: 0.0,
          max: 100.0,
          step: 1.0,
          style: SliderStyle.OutSet
        )
        .blockColor(Color.BLUE)
        .trackColor(Color.GRAY)
        .selectedColor(Color.BLUE)
        .showSteps(true)
        .showTips(true)
        .onChange({value: Float64, mode: SliderChangeMode =>
          this.outSetValue = value
          nativeLog("value: ${value} mode: ")
        })
        Text("${this.outSetValue}").fontSize(16)
      }
      .padding(top: 50 )
      .width(80.percent)

      Text("slider in set").fontSize(9).fontColor(0xCCCCCC).width(90.percent)
      Row() {
        Slider(
          value: this.inSetValue,
          min: 0.0,
          max: 100.0,
          step: 1.0,
          style: SliderStyle.InSet
        )
        .blockColor(0xCCCCCC)
        .trackColor(Color.BLACK)
        .selectedColor(0xCCCCCC)
        .showSteps(false)
        .showTips(false)
        .onChange({value: Float64, mode: SliderChangeMode =>
          this.inSetValue = value
          nativeLog("value: ${value} mode: ")
        })
        Text("${this.inSetValue}").fontSize(16)
      }
      .width(80.percent)

      Row() {
        Column() {
          Text("slider out direction set").fontSize(9).fontColor(0xCCCCCC).width(50.percent)
          Slider(
            value: this.outVerticalSetValue,
            min: 0.0,
            max: 100.0,
            step: 1.0,
            style: SliderStyle.OutSet,
            direction: Axis.Vertical
          )
          .blockColor(Color.BLUE)
          .trackColor(Color.GRAY)
          .selectedColor(Color.BLUE)
          .showSteps(true)
          .showTips(true)
          .onChange({value: Float64, mode: SliderChangeMode =>
            this.outVerticalSetValue = value
            nativeLog("value: ${value} mode: ")
          }).height(60.percent)
          Text("${this.outVerticalSetValue}").fontSize(16)
        }.width(50.percent).height(500)

        Column() {
          Text("slider in direction set").fontSize(9).fontColor(0xCCCCCC).width(50.percent)
          Slider(
            value: this.inVerticalSetValue,
            min: 0.0,
            max: 100.0,
            step: 1.0,
            style: SliderStyle.InSet,
            direction: Axis.Vertical
          )
          .blockColor(0xCCCCCC)
          .trackColor(Color.BLACK)
          .selectedColor(0xCCCCCC)
          .showSteps(false)
          .showTips(false)
          .onChange({value: Float64, mode: SliderChangeMode =>
            this.inVerticalSetValue = value
            nativeLog("value: ${value} mode: ")
          }).height(60.percent)
          Text("${this.inVerticalSetValue}").fontSize(16)
        }.width(50.percent).height(500)
      }

    }.width(100.percent).margin(top: 5)
  }
}

​
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
技术交流群可加wx“LB-9191” 备注cangjie