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

BisonLiu
215 阅读6分钟

滑动条组件，通常用于用快速调节设置值，如音量调节、亮度调节等应用场景。

说明

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值时，此时无法滑动。
参数名参数类型必填默认值描述
valueFloat64否0.0当前进度值。
minFloat64否0.0设置最小值。
maxFloat64否100.0设置最大值。
stepFloat64否1.0设置滑动条滑动步长。说明：当step<=0时，取max-min的值。
styleSliderStyle否SliderStyle.OutSet设置滑动条的滑块样式。
directionAxis否Axis.Horizontal设置滑动条滑动方向为水平或竖直方向。
reverseBool否false设置滑动条取值范围是否反向。说明：设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动。设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。

函数

blockColor(Color)

public func blockColor(value: Color): This

根据指定的Color设置滑块的颜色。

参数名参数类型必填默认值描述
valueColor是Color(0xFFFFFF)滑块的颜色。

blockColor(UInt32)

public func blockColor(value: UInt32): This

根据指定的色值设置滑块的颜色。

参数名参数类型必填默认值描述
valueUInt32是0xFFFFFF滑块的颜色。

blockColor(CJResource)

public func blockColor(value: CJResource): This

根据指定的资源文件设置滑块的颜色。

参数名参数类型必填默认值描述
valueCJResource是-滑块的颜色。

trackColor(Color)

public func trackColor(value: Color): This

根据指定的Color设置滑轨的背景颜色。

参数名参数类型必填默认值描述
valueColor是Color(0xDBDBDB)滑轨的背景颜色。

trackColor(UInt32)

public func trackColor(value: UInt32): This

根据指定的色值设置滑轨的背景颜色。

参数名参数类型必填默认值描述
valueUInt32是0xDBDBDB滑轨的背景颜色。

trackColor(CJResource)

public func trackColor(value: CJResource): This

根据指定的资源文件设置滑轨的背景颜色。

参数名参数类型必填默认值描述
valueCJResource是-滑轨的背景颜色。

selectedColor(Color)

public func selectedColor(value: Color): This

根据指定的Color设置滑轨已滑动部分的颜色。

参数名参数类型必填默认值描述
valueColor是Color(0x007DFF)滑轨已滑动部分的颜色。

selectedColor(UInt32)

public func selectedColor(value: UInt32): This

根据指定的色值设置滑轨已滑动部分的颜色。

参数名参数类型必填默认值描述
valueUInt32是0x007DFF滑轨已滑动部分的颜色。

selectedColor(CJResource)

public func selectedColor(value: CJResource): This

根据指定的资源文件设置滑轨已滑动部分的颜色。

参数名参数类型必填默认值描述
valueCJResource是-滑轨已滑动部分的颜色。

showSteps(Bool)

public func showSteps(value: Bool): This

设置当前是否显示步长刻度值。

参数名参数类型必填默认值描述
valueBool是false当前是否显示步长刻度值。

showTips(Bool)

public func showTips(value: Bool): This

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

参数名参数类型必填默认值描述
valueBool是false滑动时是否显示气泡提示。

trackThickness(Length)

public func trackThickness(value: Length): This

根据指定的Length设置滑轨的粗细。设置为小于等于0的值时，取默认值。

参数名参数类型必填默认值描述
valueLength是-滑轨的粗细。

trackThickness(Int64)

public func trackThickness(value: Int64): This

根据指定的整数值设置滑轨的粗细。设置为小于等于0的值时，取默认值。

参数名参数类型必填默认值描述
valueInt64是-滑轨的粗细。

trackThickness(Float64)

public func trackThickness(value: Float64): This

根据指定的浮点值设置滑轨的粗细。设置为小于等于0的值时，取默认值。

参数名参数类型必填默认值描述
valueFloat64是-滑轨的粗细。

minLabel(Float64)

public func minLabel(value: Float64): This

根据指定的浮点值设置可滑动的最小值。

参数名参数类型必填默认值描述
valueFloat64是0.0最小值。

maxLabel(Float64)

public func maxLabel(value: Float64): This

根据指定的浮点值设置可滑动的最大值。

参数名参数类型必填默认值描述
valueFloat64是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): This

Slider拖动或点击时触发事件回调。

参数名参数类型描述
onChcallbackange(Float64, SliderChangeMode)->UnitSlider滑动时触发事件回调。

onChange(()->Unit)

public func onChange(callback: ()->Unit): This

Slider拖动或点击时触发事件回调。

参数名参数类型描述
callback()->UnitSlider滑动时触发事件回调。

通用属性/通用事件

通用属性：不支持触摸热区设置。

通用事件：仅支持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

avatar
文章
阅读
粉丝