鸿蒙HarmonyOS NEXT开发：Slider（基础组件）

于 2024-08-18 20:58:54 发布
阅读量336 收藏 6
点赞数 6
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141305394
版权
鸿蒙 同时被 2 个专栏收录
115 篇文章 0 订阅
订阅专栏
ArkTS
110 篇文章 0 订阅
订阅专栏

Slider

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

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Slider(options?: SliderOptions)

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填描述
optionsSliderOptions否配置滑动条的参数。

SliderOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称类型必填说明
valuenumber否当前进度值。
默认值：与参数min的取值一致。
从API version 10开始，该参数支持$$双向绑定变量。
minnumber否设置最小值。
默认值：0
maxnumber否设置最大值。
默认值：100
说明：
min >= max异常情况，min取默认值0，max取默认值100。
value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。
stepnumber否设置Slider滑动步长。
默认值：1
取值范围：[0.01, max]
说明：
若设置的step值小于0或大于max值时，则按默认值显示。
styleSliderStyle否设置Slider的滑块与滑轨显示样式。
默认值：SliderStyle.OutSet
direction8+Axis否设置滑动条滑动方向为水平或竖直方向。
默认值：Axis.Horizontal
reverse8+boolean否设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
默认值：false

SliderStyle枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

名称描述
OutSet滑块在滑轨上。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
InSet滑块在滑轨内。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
NONE12+无滑块

属性

支持除触摸热区以外的通用属性。

blockColor

blockColor(value: ResourceColor)

设置滑块的颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是滑块的颜色。
默认值：‘#ffffff’

trackColor

trackColor(value: ResourceColor | LinearGradient)

设置滑轨的背景颜色。

从API version 12开始支持利用LinearGradient设置滑轨的渐变色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor | LinearGradient12+是滑轨的背景颜色。
说明： 设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。
默认值：‘#19182431’
该接口中的LinearGradient类型不支持在原子化服务中使用。

selectedColor

selectedColor(value: ResourceColor)

设置滑轨的已滑动部分颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是滑轨的已滑动部分颜色。
默认值：‘#007dff’

showSteps

showSteps(value: boolean)

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是当前是否显示步长刻度值。
默认值：false

showTips

showTips(value: boolean, content?: ResourceStr)

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

当direction的值为Axis.Horizontal时，tip显示在滑块上方，如果上方空间不够，则在下方显示。值为Axis.Vertical时，tip显示在滑块左边，如果左边空间不够，则在右边显示。不设置周边边距或者周边边距比较小时，tip会被截断。

tip的绘制区域为Slider自身节点的overlay。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是滑动时是否显示气泡提示。
默认值：false
content10+ResourceStr否气泡提示的文本内容，默认显示当前百分比。

trackThickness8+

trackThickness(value: Length)

设置滑轨的粗细。设置为小于等于0的值时，取默认值。

为保证滑块和滑轨的SliderStyle样式，blockSize跟随trackThickness同比例增减。

当style为SliderStyle.OutSet时，trackThickness ：blockSize = 1 ：4，当style为SliderStyle.InSet时，trackThickness ：blockSize = 5 ：3。

在变更trackThickness过程中，若trackThickness的大小或者blockSize的大小超过slider组件的width或者height(SliderStyle.OutSet时可能trackThickness没超过，但是blockSize超过了)，取默认值。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是滑轨的粗细。
默认值：当参数style的值设置SliderStyle.OutSet 时为 4.0vp，SliderStyle.InSet时为20.0vp。

blockBorderColor10+

blockBorderColor(value: ResourceColor)

设置滑块描边颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是滑块描边颜色。
默认值：‘#00000000’

blockBorderWidth10+

blockBorderWidth(value: Length)

设置滑块描边粗细。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是滑块描边粗细。

stepColor10+

stepColor(value: ResourceColor)

设置刻度颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是刻度颜色。
默认值：‘#19182431’

trackBorderRadius10+

trackBorderRadius(value: Length)

设置底板圆角半径。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是底板圆角半径。
默认值：‘2vp’

selectedBorderRadius12+

selectedBorderRadius(value: Dimension)

设置已滑动部分（高亮）圆角半径。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDimension是已选择部分圆角半径。
默认值：style值为SliderStyle.InSet或SliderStyle.OutSet时，跟随底板圆角；style值为SliderStyle.NONE时，为0。

blockSize10+

blockSize(value: SizeOptions)

设置滑块大小。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSizeOptions是滑块大小。
默认值：当参数style的值设置为SliderStyle.OutSet时为{width: 16, height: 16}，当参数style的值设置为SliderStyle.InSet时为{width: 12, height: 12}。
当设置的blockSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。

blockStyle10+

blockStyle(value: SliderBlockStyle)

设置滑块形状参数。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSliderBlockStyle是滑块形状参数。
默认值：SliderBlockType.DEFAULT，使用圆形滑块。

stepSize10+

stepSize(value: Length)

设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是刻度大小（直径）。
默认值：‘4vp’

minLabel(deprecated)

minLabel(value: string)

设置最小值。

从API Version 9开始废弃，使用min替代。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring是最小值。

maxLabel(deprecated)

maxLabel(value: string)

设置最大值。

从API Version 9开始废弃，使用max替代。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring是最大值。

说明：

  • Slider无默认padding。
  • 当Slider为水平滑动条时，Slider默认高度为40vp，宽度为父容器的宽度，滑动条居中显示，左右间距为分别为10vp，若设置padding，padding不会覆盖左右间距。
  • 当Slider为竖直滑动条时，Slider默认宽度为40vp，高度为父容器的高度，滑动条居中显示，上下间距为分别为6vp，若设置padding，padding不会覆盖上下间距。

sliderInteractionMode12+

sliderInteractionMode(value: SliderInteraction)

设置用户与滑动条组件交互方式。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSliderInteraction是用户与滑动条组件交互方式。
默认值：SliderInteraction.SLIDE_AND_CLICK。

minResponsiveDistance12+

minResponsiveDistance(value: number)

设置滑动响应的最小距离。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是设置滑动响应的最小距离，滑动超过此距离后才响应使滑块滑动。
说明：
单位与参数min和max一致。
当value小于0、大于MAX-MIN或非法值时，取默认值。
默认值：0。

contentModifier12+

contentModifier(modifier: ContentModifier<SliderConfiguration>)

定制Slider内容区的方法。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
modifierContentModifier<SliderConfiguration>是在Slider组件上，定制内容区的方法。
modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

slideRange12+

slideRange(value: SlideRange)

设置有效滑动区间。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSlideRange是设置有效滑动区间

SliderBlockStyle10+对象说明

Slider组件滑块形状参数。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称类型必填说明
typeSliderBlockType是设置滑块形状。
默认值：SliderBlockType.DEFAULT，使用圆形滑块。
imageResourceStr否设置滑块图片资源。
图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。
shapeCircle | Ellipse | Path | Rect 否设置滑块使用的自定义形状。

SliderBlockType10+枚举说明

Slider组件滑块形状枚举。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
DEFAULT使用默认滑块（圆形）。
IMAGE使用图片资源作为滑块。
SHAPE使用自定义形状作为滑块。

SliderInteraction12+枚举说明

用户与滑动条组件交互方式

名称描述
SLIDE_AND_CLICK用户可拖拽滑块或者点击滑轨使滑块移动。
SLIDE_ONLY不允许用户通过点击滑轨使滑块移动。

SlideRange12+对象说明

定义SlideRange中使用的回调类型。

参数名类型必填说明
fromnumber是设置有效滑动区间的开始。
tonumber是设置有效滑动区间的结束。

说明：

  • 当前仅当MIN<=from<=to<=MAX时该接口生效(MIN和MAX不依赖于其设置的值, 而取决于其实际生效的值)。
  • 可只设置from或者to, 也可以同时设置from和to。
  • 当接口生效, 设置的from处于紧邻的step整数倍的值之间, 则from实际取左区间step整数倍的那个值或者MIN作为修正后的值。
  • 当接口生效, 设置的to处于紧邻的step整数倍的值之间, 则to实际取右区间step整数倍的那个值或者MAX作为修正后的值。
  • 在from和to取修正值后, 当value是undefined或null时, 其取值与from一致; 当value是数值型, 且value <= from, 则取from; value > to, 则取to。

事件

支持通用事件外，还支持以下事件：

onChange

onChange(callback: (value: number, mode: SliderChangeMode) => void)

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

Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。

当连贯动作为拖动动作时，不触发Click状态。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前滑动进度值，变化范围为对应步长steps数组。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。
modeSliderChangeMode是事件触发的相关状态值。

SliderChangeMode枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称值描述
Begin0手势/鼠标接触或者按下滑块。
Moving1正在拖动滑块过程中。
End2手势/鼠标离开滑块。
Click3点击滑动条使滑块位置移动。

SliderConfiguration12+对象说明

开发者需要自定义class实现ContentModifier接口。

参数名类型说明
valuenumber当前进度值。
minnumber最小值。
maxnumber最大值。
stepnumberSlider滑动步长。
triggerChangeSliderTriggerChangeCallback触发Slider变化。

SliderTriggerChangeCallback12+对象说明

定义SliderConfiguration中使用的回调类型。

参数名类型必填说明
valuenumber是设置当前的进度值。
modeSliderChangeMode是设置事件触发的相关状态值。

示例

示例1

// xxx.ets
@Entry
@Component
struct SliderExample {
  @State outSetValueOne: number = 40
  @State inSetValueOne: number = 40
  @State noneValueOne: number = 40
  @State outSetValueTwo: number = 40
  @State inSetValueTwo: number = 40
  @State vOutSetValueOne: number = 40
  @State vInSetValueOne: number = 40
  @State vOutSetValueTwo: number = 40
  @State vInSetValueTwo: number = 40

  build() {
    Column({ space: 8 }) {
      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.outSetValueTwo,
          step: 10,
          style: SliderStyle.OutSet
        })
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.inSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.inSetValueTwo,
          step: 10,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.noneValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.NONE
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.noneValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.noneValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Row() {
        Column() {
          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Text().width('10%')
            Slider({
              value: this.vOutSetValueOne,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vOutSetValueTwo,
              step: 10,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)

        Column() {
          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Slider({
              value: this.vInSetValueOne,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
            })
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vInSetValueTwo,
              step: 10,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true
            })
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)
      }
    }.width('100%')
  }
}
ts

示例2

@Entry
@Component
struct SliderExample {
  @State tipsValue: number = 40

  build() {
    Column({ space: 8 }) {
      Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: 40, height: 40 })
        .blockBorderColor(Color.Red)
        .blockBorderWidth(5)
      Divider()
      Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40, step: 10 })
        .showSteps(true)
        .stepSize(8)
        .stepColor(Color.Yellow)
      Divider()
      Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40 })
        .trackBorderRadius(2)
      Divider()
      Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: 40 })
        .selectedBorderRadius(2)
      Divider()
      Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.DEFAULT })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') })
      Slider({ style: SliderStyle.OutSet, value: 40 })
        .blockSize({ width: '60px', height: '60px' })
        .blockColor(Color.Red)
        .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) })
      Divider()
      Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')
      Slider({ style: SliderStyle.InSet, value: this.tipsValue })
        .showTips(true, this.tipsValue.toFixed())
        .onChange(value => {
          this.tipsValue = value
        })
    }
  }
}
ts

示例3

// xxx.ets
//该示例实现了Slider组件通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。
@Builder function buildSlider(config: SliderConfiguration) {
  Row() {
    Column({space: 30}) {
      Progress({value: config.value, total: config.max, type:ProgressType.Ring})
        .margin({ top:20 })

      Button('增加').onClick(() => {
        config.value = config.value + config.step
        config.triggerChange(config.value, SliderChangeMode.Click)
      })
        .width(100)
        .height(25)
        .fontSize(10)
        .enabled(config.value<config.max)

      Button('减少').onClick(() => {
        config.value=config.value-config.step
        config.triggerChange(config.value, SliderChangeMode.Click)
      })
        .width(100)
        .height(25)
        .fontSize(10)
        .enabled(config.value>config.min)

      Slider({
        value: config.value,
        min: config.min,
        max: config.max,
        step:config.step,
      })
        .width(config.max)
        .visibility((config.contentModifier as MySliderStyle).showSlider?Visibility.Visible:Visibility.Hidden)
        .showSteps(true)
        .onChange((value: number, mode: SliderChangeMode) => {
          config.triggerChange(value, mode)
        })
      Text('当前状态：'+ ((config.contentModifier as MySliderStyle).sliderChangeMode==0?"Begin"
        :((config.contentModifier as MySliderStyle).sliderChangeMode==1?"Moving"
          :((config.contentModifier as MySliderStyle).sliderChangeMode==2?"End"
            :((config.contentModifier as MySliderStyle).sliderChangeMode==3?"Click":"无")))))
        .fontSize(10)
      Text('进度值：'+ config.value)
        .fontSize(10)
      Text('最小值：'+ config.min)
        .fontSize(10)
      Text('最大值：'+ config.max)
        .fontSize(10)
      Text('步长：'+ config.step)
        .fontSize(10)
    }
    .width('80%')

  }
  .width('100%')
}

class MySliderStyle implements ContentModifier<SliderConfiguration> {
  showSlider:boolean=true
  sliderChangeMode:number=0
  constructor(showSlider: boolean,sliderChangeMode:number) {
    this.showSlider = showSlider
    this.sliderChangeMode = sliderChangeMode
  }
  applyContent() : WrappedBuilder<[SliderConfiguration]> {
    return wrapBuilder(buildSlider)
  }
}


@Entry
@Component
struct SliderExample {
  @State showSlider:boolean=true
  @State sliderValue: number = 0
  @State sliderMin: number = 10
  @State sliderMax: number = 100
  @State sliderStep: number = 20
  @State sliderChangeMode: number = 0

  build() {
    Column({ space: 8 }) {

      Row() {
        Slider({
          value: this.sliderValue,
          min: this.sliderMin,
          max: this.sliderMax,
          step:this.sliderStep,
        })
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.sliderValue = value
            this.sliderChangeMode=mode
            console.info('【SliderLog】value:' + value + 'mode:' + mode.toString())
          })
          .contentModifier(new MySliderStyle(this.showSlider,this.sliderChangeMode))

      }
      .width('100%')

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

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

 

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

蜀道叁QAQ
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS三方组件的开发和绘制.pptx
09-26
在 HarmonyOS 应用程序开发中，用户界面（UI）的设计和三方组件的开发与绘制是至关重要的环节。本课程由 HarmonyOS 的资深开发者董昱主讲，他作为华为HDE，不仅拥有丰富的系统课程开发经验，还曾担任过华为首届...
HarmonyOS 实现一个滑块验证
08-10
下面我们将详细探讨如何在 HarmonyOS 上开发这样一个组件。 首先，我们需要理解 HarmonyOS 的应用开发环境。HarmonyOS 使用基于 Java 的开发语言以及一种名为 JSF（JavaScript Framework）的轻量级框架，这使得...
鸿蒙HarmonyOS NEXT开发：Gauge（基础组件）
shudaoshanBBQ的博客
08-15 822
数据量规图表组件，用于将数据展示为环形图表。
鸿蒙HarmonyOS NEXT开发：图片边框设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-08 746
设置容器组件的图片边框样式。
鸿蒙HarmonyOS NEXT开发：RichEditor（基础组件）
最新发布
shudaoshanBBQ的博客
08-18 615
支持图文混排和文本交互式编辑的组件。
鸿蒙HarmonyOS NEXT开发：自定义绘制设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 677
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
鸿蒙HarmonyOS NEXT开发：无障碍属性（ArkTS通用属性）
shudaoshanBBQ的博客
08-10 1028
组件可以设置相应的无障碍属性和事件来更好地使用无障碍能力。
HarmonyOS Next开发学习手册——基础组件(slider开发）
maniuT的博客
07-17 483
slider为滑动条组件，用来快速调节音量、亮度等。
HarmonyOS Next开发学习手册——UI开发（组件布局）
maniuT的博客
07-15 965
组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见 组件。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见 自定义组件。
2024年HarmonyOS鸿蒙最新OpenHarmony开发实战：slider组件的使用（JS）(1)，2024年最新鸿蒙面试题基础
2401_84851624的博客
05-14 753
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
HarmonyOS实战开发-slider组件的使用
m0_70749039的博客
03-31 1287
本篇Codelab主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。
vue组件开发之slider组件使用详解
10-14
在Vue组件开发中，Slider组件是一种常见的功能，用于实现滑动轮播效果，通常用于展示图片、内容或信息。本篇文章将详细讲解如何在Vue中开发一个基本的Slider组件。 首先，Slider组件的核心是通过CSS的`transform`...
微信小程序第二章 基础组件slider组件
11-06
微信小程序第二章 基础组件slider组件
React-slider:React的Slider UI组件
05-01
rc滑块React的Slider UI组件屏幕截图特征支持IE9，IE9 +，Chrome，Firefox和Safari安装npm install --save rc-slider用法import React from 'react' ;import ReactDOM from 'react-dom' ;import Slider , { Range } ...
HarmonyOS应用开发学习-ArkUI-容器组件
08-15 1192
设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。-size:设置导航点的直径。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。例如,"1fr 1fr 2fr”是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。设置为false是为横向Tabs，设置为true时为纵向Tabs。
鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件
鸿蒙的技术博客
08-14 1203
通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。
鸿蒙（API 12 Beta3版）【本地媒体会话概述】 音视频播控服务
鸿蒙的技术博客
08-13 1097
本地媒体会话的数据源均在设备本地，交互过程如图所示。
HarmonyOS Developer之生成二维码
weixin_47988426的博客
08-14 365
生成二维码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值