华为仓颉鸿蒙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值时，此时无法滑动。

<colgroup data-id="c7104f7d-9H4drWMr"><col data-id="c17a874d-QZG2391A" span="1" width="115.195"><col data-id="c17a874d-3fN0cakP" span="1" width="115.195"><col data-id="c17a874d-mMZ4dDBi" span="1" width="115.195"><col data-id="c17a874d-aNLjJN9E" span="1" width="115.195"><col data-id="cdb166d8-M42HEKA5" span="1" width="115.219"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

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设置滑块的颜色。

<colgroup data-id="c7104f7d-XaUn6ZkR"><col data-id="cd89ecb0-87NVh4nK"><col data-id="cd89ecb0-cAETYW2Y"><col data-id="cd89ecb0-5PJAjdAm"><col data-id="cd89ecb0-M6GZDs08"><col data-id="cd89ecb0-6pgrbnoE"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Color

是

Color(0xFFFFFF)

滑块的颜色。

blockColor(UInt32)

public func blockColor(value: UInt32): This

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

<colgroup data-id="c7104f7d-WbclOb3m"><col data-id="cd89ecb0-k1vSMX8H"><col data-id="cd89ecb0-jFotWeBa"><col data-id="cd89ecb0-qKmEUqbq"><col data-id="cd89ecb0-pxgjnS5Z"><col data-id="cd89ecb0-hkTrBP9k"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

UInt32

是

0xFFFFFF

滑块的颜色。

blockColor(CJResource)

public func blockColor(value: CJResource): This

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

<colgroup data-id="c7104f7d-aYaO0YPm"><col data-id="cd89ecb0-cfirKG4t"><col data-id="cd89ecb0-K0wQpQQI"><col data-id="cd89ecb0-znJ6iu29"><col data-id="cd89ecb0-2JHt66zh"><col data-id="cd89ecb0-YZPS0Gat"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

CJResource

是

滑块的颜色。

trackColor(Color)

public func trackColor(value: Color): This

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

<colgroup data-id="c7104f7d-FnNE1NFY"><col data-id="cd89ecb0-vAhToR7y"><col data-id="cd89ecb0-EIkj2SxA"><col data-id="cd89ecb0-kKd9WMBH"><col data-id="cd89ecb0-nujGtNow"><col data-id="cd89ecb0-v0H3Uc8m"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Color

是

Color(0xDBDBDB)

滑轨的背景颜色。

trackColor(UInt32)

public func trackColor(value: UInt32): This

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

<colgroup data-id="c7104f7d-jTkd7d6C"><col data-id="cd89ecb0-OoOhMsxY"><col data-id="cd89ecb0-xYtsR8vo"><col data-id="cd89ecb0-GzR0eVUn"><col data-id="cd89ecb0-RU6JF6lE"><col data-id="cd89ecb0-mTevI9T8"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

UInt32

是

0xDBDBDB

滑轨的背景颜色。

trackColor(CJResource)

public func trackColor(value: CJResource): This

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

<colgroup data-id="c7104f7d-SI5NCb6Q"><col data-id="c17a874d-mRbq11PT" span="1" width="115.195"><col data-id="c17a874d-UPbnfikF" span="1" width="115.195"><col data-id="c17a874d-bHH1h7ph" span="1" width="115.195"><col data-id="c17a874d-fGJ2gIW8" span="1" width="115.195"><col data-id="cdb166d8-laLOf9FL" span="1" width="115.219"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

CJResource

是

滑轨的背景颜色。

selectedColor(Color)

public func selectedColor(value: Color): This

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

<colgroup data-id="c7104f7d-9F4AncwS"><col data-id="c17a874d-IVftTu4k" span="1" width="115.195"><col data-id="c17a874d-BCmTiDvs" span="1" width="115.195"><col data-id="c17a874d-dbprkTC1" span="1" width="115.195"><col data-id="c17a874d-Fsu57KOF" span="1" width="115.195"><col data-id="cdb166d8-5RfME21Z" span="1" width="115.219"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Color

是

Color(0x007DFF)

滑轨已滑动部分的颜色。

selectedColor(UInt32)

public func selectedColor(value: UInt32): This

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

<colgroup data-id="c7104f7d-B2KzkJy7"><col data-id="c17a874d-l6P7dcn1" span="1" width="115.195"><col data-id="c17a874d-KCpmuZPj" span="1" width="115.195"><col data-id="c17a874d-dFhIfqyK" span="1" width="115.195"><col data-id="c17a874d-UWNEnJii" span="1" width="115.195"><col data-id="cdb166d8-LaAm69aA" span="1" width="115.219"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

UInt32

是

0x007DFF

滑轨已滑动部分的颜色。

selectedColor(CJResource)

public func selectedColor(value: CJResource): This

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

<colgroup data-id="c7104f7d-O8nWgKl2"><col data-id="cd89ecb0-t2DEXfyO"><col data-id="cd89ecb0-hXFf4ra6"><col data-id="cd89ecb0-PCQ79q5U"><col data-id="cd89ecb0-FV6qF7AJ"><col data-id="cd89ecb0-kTiqrmlm"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

CJResource

是

滑轨已滑动部分的颜色。

showSteps(Bool)

public func showSteps(value: Bool): This

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

<colgroup data-id="c7104f7d-cm3EHdWE"><col data-id="cd89ecb0-K58eUxAe"><col data-id="cd89ecb0-Mlb2fsts"><col data-id="cd89ecb0-hoP323b7"><col data-id="cd89ecb0-lhnPmNEo"><col data-id="cd89ecb0-P0Et125n"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Bool

是

false

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

showTips(Bool)

public func showTips(value: Bool): This

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

<colgroup data-id="c7104f7d-fbaMkktb"><col data-id="cd89ecb0-GpqrCz4t"><col data-id="cd89ecb0-DSWqZMIW"><col data-id="cd89ecb0-JEF5d7Wx"><col data-id="cd89ecb0-kdiyOV08"><col data-id="cd89ecb0-pFhbFFMx"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Bool

是

false

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

trackThickness(Length)

public func trackThickness(value: Length): This

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

<colgroup data-id="c7104f7d-kCDhymyK"><col data-id="cd89ecb0-ZJgw481C"><col data-id="cd89ecb0-Nc4GcLD9"><col data-id="cd89ecb0-1n7nYwXB"><col data-id="cd89ecb0-cjHBw9mV"><col data-id="cd89ecb0-OD1NENri"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Length

是

滑轨的粗细。

trackThickness(Int64)

public func trackThickness(value: Int64): This

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

<colgroup data-id="c7104f7d-kLMZkuzd"><col data-id="cd89ecb0-mMCoQv1Z"><col data-id="cd89ecb0-eEjCxkHO"><col data-id="cd89ecb0-0e3Ax5mt"><col data-id="cd89ecb0-k35khCOq"><col data-id="cd89ecb0-WMTNSwE9"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Int64

是

滑轨的粗细。

trackThickness(Float64)

public func trackThickness(value: Float64): This

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

<colgroup data-id="c7104f7d-JrGnmk64"><col data-id="cd89ecb0-R8bekUHl"><col data-id="cd89ecb0-yXP4PTJk"><col data-id="cd89ecb0-BAmcLu05"><col data-id="cd89ecb0-gJsRlY4p"><col data-id="cd89ecb0-qVluJj45"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Float64

是

滑轨的粗细。

minLabel(Float64)

public func minLabel(value: Float64): This

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

<colgroup data-id="c7104f7d-VU9kjeKE"><col data-id="cd89ecb0-io9ONQ8E"><col data-id="cd89ecb0-E6kUtGD5"><col data-id="cd89ecb0-AV4Yojo0"><col data-id="cd89ecb0-ODSHGq3c"><col data-id="cd89ecb0-xR5cb7tL"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Float64

是

0.0

最小值。

maxLabel(Float64)

public func maxLabel(value: Float64): This

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

<colgroup data-id="c7104f7d-ItzocFzB"><col data-id="cd89ecb0-9OvFWjyW"><col data-id="cd89ecb0-43TcOpua"><col data-id="cd89ecb0-xKLjNFLp"><col data-id="cd89ecb0-Xoux0YeT"><col data-id="cd89ecb0-y2ptgCJ1"></colgroup>
|

参数名

参数类型

必填

默认值

描述

|
|

value

Float64

是

100.0

最大值。

枚举说明

SliderStyle

Slider组件滑块与滑轨显示样式枚举。

<colgroup data-id="c7104f7d-V2RrQYMe"><col data-id="cd89ecb0-B7AudFpy"><col data-id="cd89ecb0-NhjSQoFm"></colgroup>
|

名称

描述

|
|

OutSet

滑块在滑轨上

|
|

InSet

滑块在滑轨内

Axis

Slider组件滑动条滑动方向枚举。

<colgroup data-id="c7104f7d-6n4y1Jak"><col data-id="cd89ecb0-XcUHfzEc"><col data-id="cd89ecb0-6zmKPRtZ"></colgroup>
|

名称

描述

|
|

Vertical

竖直方向

|
|

Horizontal

水平方向

SliderChangeMode

Slider组件拖动或点击事件枚举。

<colgroup data-id="c7104f7d-vs5nDMWs"><col data-id="cd89ecb0-CwicG7Tf"><col data-id="cd89ecb0-IeTUStO6"></colgroup>
|

名称

描述

|
|

Begin

用户开始拖动滑块

|
|

Moving

用户拖动滑块中

|
|

End

用户结束拖动滑块

|
|

Click

用户点击滑动条使滑块位置移动

事件

onChange((Float64, SliderChangeMode)->Unit)

public func onChange(callback: (Float64, SliderChangeMode)->Unit): This

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

<colgroup data-id="c7104f7d-wIkqqZv9"><col data-id="cd89ecb0-DPASk5OL"><col data-id="cd89ecb0-ZTmrJJ4x"><col data-id="cd89ecb0-RkRkwKuv"></colgroup>
|

参数名

参数类型

描述

|
|

onChcallbackange

(Float64, SliderChangeMode)->Unit

Slider滑动时触发事件回调。

onChange(()->Unit)

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

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

<colgroup data-id="c7104f7d-aJ3IpiFL"><col data-id="c6233357-KMLOBaVj" span="1" width="192"><col data-id="c6233357-7lTJT6c7" span="1" width="192"><col data-id="c6233357-gRT5IK6f" span="1" width="192"></colgroup>
|

参数名

参数类型

描述

|
|

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)
      }
    }

[图片上传失败...(image-68e8ce-1734954562534)]

如对您有帮助，帮忙点个“在看、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349

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

推荐阅读更多精彩内容