拖动条 SeekBar ​

数据结构 ​

QTSeekBarMode ​

进度条的模式

参数描述类型必填
QT_SEEK_BAR_MODE_SINGLE单进度条模式QTSeekBarMode
QT_SEEK_BAR_MODE_RANGE双进度条模式QTSeekBarMode

QTSeekBarGravity ​

进度条的位置

参数描述类型必填
QT_SEEK_BAR_GRAVITY_TOP顶部QTSeekBarGravity
QT_SEEK_BAR_GRAVITY_BOTTOM底部QTSeekBarGravity
QT_SEEK_BAR_GRAVITY_CENTER居中QTSeekBarGravity

QTSeekBarIndicatorMode ​

进度条指示器模式

参数描述类型必填
QT_SEEK_BAR_INDICATION_MODE_SHOW_WHEN_TOUCH触摸时显示QTSeekBarIndicatorMode
QT_SEEK_BAR_INDICATION_MODE_ALWAYS_HIDE一直隐藏QTSeekBarIndicatorMode
QT_SEEK_BAR_INDICATION_MODE_ALWAYS_SHOW_AFTER_TOUCH触摸后显示QTSeekBarIndicatorMode
QT_SEEK_BAR_INDICATION_MODE_ALWAYS_SHOW一直显示QTSeekBarIndicatorMode

QTSeekBarTickMarkMode ​

进度条刻度模式

参数描述类型必填
QT_SEEK_BAR_TICK_MARK_MODE_NUMBER数字QTSeekBarTickMarkMode
QT_SEEK_BAR_TICK_MARK_MODE_OTHER其他QTSeekBarTickMarkMode

QTSeekBarTickMarkGravity ​

进度条刻度位置

参数描述类型必填
QT_SEEK_BAR_TICK_MARK_GRAVITY_LEFT左QTSeekBarTickMarkGravity
QT_SEEK_BAR_TICK_MARK_GRAVITY_CENTER居中QTSeekBarTickMarkGravity
QT_SEEK_BAR_TICK_MARK_GRAVITY_RIGHT右QTSeekBarTickMarkGravity

QTSeekBarTickMarkLayoutGravity ​

进度条刻度布局位置

参数描述类型必填
QT_SEEK_BAR_TICK_MARK_LAYOUT_GRAVITY_TOP上QTSeekBarTickMarkLayoutGravity
QT_SEEK_BAR_TICK_MARK_LAYOUT_GRAVITY_BOTTOM下QTSeekBarTickMarkLayoutGravity

属性 ​

参数描述类型必填默认值
onProgressChanged进度变化回调function否null

事件 ​

onSeekChanged ​

完整事件声明：function onSeekChanged(progress: number): void

进度变化

参数描述类型非空
progress进度number是

接口 ​

setFocusable ​

该方法用于设置是否能获取焦点。
完整方法声明：function setFocusable(focusable: boolean): void

  • 参数
参数描述类型非空
focusable是否可获取焦点boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setClickable ​

该方法用于设置是否可点击。
完整方法声明：function setClickable(clickable: boolean): void

  • 参数
参数描述类型非空
clickable是否可点击boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

requestFocus ​

该方法用于请求焦点。
完整方法声明：function requestFocus(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

setVisible ​

该方法用于设置是否可见。
完整方法声明：function setVisible(visible: boolean): void

  • 参数
参数描述类型非空
visible是否可点击boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftSeekBarVisible ​

该方法用于设置左进度条是否可见。
完整方法声明：function setLeftSeekBarVisible(visible: boolean): void

  • 参数
参数描述类型非空
visible是否可见boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setSeekBarMode ​

该方法用于设置进度条模式。
完整方法声明：function setSeekBarMode(mode: QTSeekBarMode): void

  • 参数
参数描述类型非空
mode进度条模式QTSeekBarMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgress ​

该方法用于设置进度条进度。
完整方法声明：function setProgress(progress: number): void

  • 参数
参数描述类型非空
progress进度条进度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setSecondProgress ​

该方法用于设置次进度条进度。
完整方法声明：function setSecondProgress(progress: number): void

  • 参数
参数描述类型非空
progress次进度条进度number是
  • 返回值：
属性描述类型默认值
无无返回值void

show ​

该方法用于设置是否显示进度条。
完整方法声明：function show(value: boolean): void

  • 参数
参数描述类型非空
value是否显示进度条boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setMaxProgress ​

该方法用于设置进度条最大进度。
完整方法声明：function setMaxProgress(progress: number): void

  • 参数
参数描述类型非空
progress最大进度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRangeProgress ​

该方法用于设置范围进度。
完整方法声明：function setRangeProgress(leftValue: number, rightValue: number): void

  • 参数
参数描述类型非空
leftValue左进度条进度number是
rightValue右进度条进度number是
  • 返回值：
属性描述类型默认值
无无返回值void

getProgress ​

该方法用于获取进度。
完整方法声明：function getProgress(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

getLeftProgress ​

该方法用于获取左进度条进度。
完整方法声明：function getLeftProgress(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

getRightProgress ​

该方法用于获取右进度条进度。
完整方法声明：function getRightProgress(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

setRange ​

该方法用于设置进度条范围。
完整方法声明：function setRange(min: number, max: number, minInterval: number): void

  • 参数
参数描述类型非空
min最小范围number是
max最大范围number是
minInterval最小间隔number是
  • 返回值：
属性描述类型默认值
无无返回值void

setGravity ​

该方法用于设置进度条位置。
完整方法声明：function setGravity(gravity: QTSeekBarGravity): void

  • 参数
参数描述类型非空
gravity位置QTSeekBarGravity是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressWidth ​

该方法用于设置进度条宽度。
完整方法声明：function setProgressWidth(progressWidth: number): void

  • 参数
参数描述类型非空
progressWidth宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressHeight ​

该方法用于设置进度条高度。
完整方法声明：function setProgressHeight(progressHeight: number): void

  • 参数
参数描述类型非空
progressHeight高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressRadius ​

该方法用于设置进度条圆角。
完整方法声明：function setProgressRadius(progressRadius: number): void

  • 参数
参数描述类型非空
progressRadius圆角number是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressColor ​

该方法用于设置进度条颜色。
完整方法声明：function setProgressColor(progressColor: number): void

  • 参数
参数描述类型非空
progressColor颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressDefaultColor ​

该方法用于设置进度条默认颜色。
完整方法声明：function setProgressDefaultColor(defaultProgressColor: number): void

  • 参数
参数描述类型非空
defaultProgressColor默认颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressDefaultDrawable ​

该方法用于设置进度条默认渐变图。
完整方法声明：function setProgressDefaultDrawable(progressDefaultDrawable: ESGradient): void

  • 参数
参数描述类型非空
progressDefaultDrawable默认渐变图ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressUrl ​

该方法用于设置进度条图片地址。
完整方法声明：function setProgressUrl(progressUrl: string): void

  • 参数
参数描述类型非空
progressUrl图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setProgressDefaultUrl ​

该方法用于设置进度条默认图片地址。
完整方法声明：function setProgressDefaultUrl(progressDefaultUrl: string): void

  • 参数
参数描述类型非空
progressDefaultUrl默认图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

showIndicator ​

该方法用于设置是否显示进度条指示器。
完整方法声明：function showIndicator(showIndicator: boolean): void

  • 参数
参数描述类型非空
showIndicator是否显示进度条指示器boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

showLeftIndicator ​

该方法用于设置是否显示左进度条指示器。
完整方法声明：function showLeftIndicator(showLeftIndicator: boolean): void

  • 参数
参数描述类型非空
showLeftIndicator是否显示左进度条指示器boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

showRightIndicator ​

该方法用于设置是否显示右进度条指示器。
完整方法声明：function showRightIndicator(showRightIndicator: boolean): void

  • 参数
参数描述类型非空
showRightIndicator是否显示右进度条指示器boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorShowMode ​

该方法用于设置进度条指示器模式。
完整方法声明：function setIndicatorShowMode(indicatorShowMode: QTSeekBarIndicatorMode): void

  • 参数
参数描述类型非空
indicatorShowMode指示器模式QTSeekBarIndicatorMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorShowMode ​

该方法用于设置进度条左指示器模式。
完整方法声明：function setLeftIndicatorShowMode(indicatorShowMode: QTSeekBarIndicatorMode): void

  • 参数
参数描述类型非空
indicatorShowMode左指示器模式QTSeekBarIndicatorMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorShowMode ​

该方法用于设置进度条右指示器模式。
完整方法声明：function setRightIndicatorShowMode(indicatorShowMode: QTSeekBarIndicatorMode): void

  • 参数
参数描述类型非空
indicatorShowMode右指示器模式QTSeekBarIndicatorMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorWidth ​

该方法用于设置进度条指示器宽度。
完整方法声明：function setIndicatorWidth(indicatorWidth: number): void

  • 参数
参数描述类型非空
indicatorWidth指示器宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorWidth ​

该方法用于设置进度条左指示器宽度。
完整方法声明：function setLeftIndicatorWidth(indicatorWidth: number): void

  • 参数
参数描述类型非空
indicatorWidth左指示器宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorWidth ​

该方法用于设置进度条右指示器宽度。
完整方法声明：function setRightIndicatorWidth(indicatorWidth: number): void

  • 参数
参数描述类型非空
indicatorWidth右指示器宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorHeight ​

该方法用于设置进度条指示器高度。
完整方法声明：function setIndicatorHeight(indicatorHeight: number): void

  • 参数
参数描述类型非空
indicatorHeight指示器高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorHeight ​

该方法用于设置进度条左指示器高度。
完整方法声明：function setLeftIndicatorHeight(indicatorHeight: number): void

  • 参数
参数描述类型非空
indicatorHeight左指示器高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorHeight ​

该方法用于设置进度条右指示器高度。
完整方法声明：function setRightIndicatorHeight(indicatorHeight: number): void

  • 参数
参数描述类型非空
indicatorHeight右指示器高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorTextDecimalFormat ​

该方法用于设置进度条指示器数字格式。
完整方法声明：function setIndicatorTextDecimalFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern指示器数字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorTextDecimalFormat ​

该方法用于设置进度条左指示器数字格式。
完整方法声明：function setLeftIndicatorTextDecimalFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern左指示器数字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorTextDecimalFormat ​

该方法用于设置进度条右指示器数字格式。
完整方法声明：function setRightIndicatorTextDecimalFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern右指示器数字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorTextStringFormat ​

该方法用于设置进度条指示器文字格式。
完整方法声明：function setIndicatorTextStringFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern指示器文字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorTextStringFormat ​

该方法用于设置进度条左指示器文字格式。
完整方法声明：function setLeftIndicatorTextStringFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern左指示器文字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorTextStringFormat ​

该方法用于设置进度条右指示器文字格式。
完整方法声明：function setRightIndicatorTextStringFormat(formatPattern: string): void

  • 参数
参数描述类型非空
formatPattern右指示器文字格式string是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorMargin ​

该方法用于设置进度条指示器Margin。
完整方法声明：function setIndicatorMargin(indicatorMargin: number): void

  • 参数
参数描述类型非空
indicatorMargin进度条指示器Marginnumber是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorMargin ​

该方法用于设置进度条左指示器Margin。
完整方法声明：function setLeftIndicatorMargin(indicatorMargin: number): void

  • 参数
参数描述类型非空
indicatorMargin进度条左指示器Marginnumber是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorMargin ​

该方法用于设置进度条右指示器Margin。
完整方法声明：function setRightIndicatorMargin(indicatorMargin: number): void

  • 参数
参数描述类型非空
indicatorMargin进度条右指示器Marginnumber是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorPaddingBottom ​

该方法用于设置进度条指示器底部边距。
完整方法声明：function setIndicatorPaddingBottom(indicatorPaddingBottom: number): void

  • 参数
参数描述类型非空
indicatorPaddingBottom进度条指示器底部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorPaddingBottom ​

该方法用于设置进度条左指示器底部边距。
完整方法声明：function setLeftIndicatorPaddingBottom(indicatorPaddingBottom: number): void

  • 参数
参数描述类型非空
indicatorPaddingBottom进度条左指示器底部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorPaddingBottom ​

该方法用于设置进度条右指示器底部边距。
完整方法声明：function setRightIndicatorPaddingBottom(indicatorPaddingBottom: number): void

  • 参数
参数描述类型非空
indicatorPaddingBottom进度条右指示器底部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorPaddingTop ​

该方法用于设置进度条指示器顶部边距。
完整方法声明：function setIndicatorPaddingTop(indicatorPaddingTop: number): void

  • 参数
参数描述类型非空
indicatorPaddingTop进度条指示器顶部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorPaddingTop ​

该方法用于设置进度条左指示器顶部边距。
完整方法声明：function setLeftIndicatorPaddingTop(indicatorPaddingTop: number): void

  • 参数
参数描述类型非空
indicatorPaddingTop进度条左指示器顶部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorPaddingTop ​

该方法用于设置进度条右指示器顶部边距。
完整方法声明：function setRightIndicatorPaddingTop(indicatorPaddingTop: number): void

  • 参数
参数描述类型非空
indicatorPaddingTop进度条右指示器顶部边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorPaddingLeft ​

该方法用于设置进度条指示器左边边距。
完整方法声明：function setIndicatorPaddingLeft(indicatorPaddingLeft: number): void

  • 参数
参数描述类型非空
indicatorPaddingLeft进度条指示器左边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorPaddingLeft ​

该方法用于设置进度条左指示器左边边距。
完整方法声明：function setLeftIndicatorPaddingLeft(indicatorPaddingLeft: number): void

  • 参数
参数描述类型非空
indicatorPaddingLeft进度条左指示器左边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorPaddingLeft ​

该方法用于设置进度条右指示器左边边距。
完整方法声明：function setRightIndicatorPaddingLeft(indicatorPaddingLeft: number): void

  • 参数
参数描述类型非空
indicatorPaddingLeft进度条右指示器左边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorPaddingRight ​

该方法用于设置进度条指示器右边边距。
完整方法声明：function setIndicatorPaddingRight(indicatorPaddingRight: number): void

  • 参数
参数描述类型非空
indicatorPaddingRight进度条指示器右边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorPaddingRight ​

该方法用于设置进度条左指示器右边边距。
完整方法声明：function setLeftIndicatorPaddingRight(indicatorPaddingRight: number): void

  • 参数
参数描述类型非空
indicatorPaddingRight进度条左指示器右边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorPaddingRight ​

该方法用于设置进度条右指示器右边边距。
完整方法声明：function setRightIndicatorPaddingRight(indicatorPaddingRight: number): void

  • 参数
参数描述类型非空
indicatorPaddingRight进度条右指示器右边边距number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorBackgroundColor ​

该方法用于设置进度条指示器背景颜色。
完整方法声明：function setIndicatorBackgroundColor(indicatorBackgroundColor: number): void

  • 参数
参数描述类型非空
indicatorBackgroundColor进度条指示器背景颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorBackgroundColor ​

该方法用于设置进度条左指示器背景颜色。
完整方法声明：function setLeftIndicatorBackgroundColor(indicatorBackgroundColor: number): void

  • 参数
参数描述类型非空
indicatorBackgroundColor进度条左指示器背景颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorBackgroundColor ​

该方法用于设置进度条右指示器背景颜色。
完整方法声明：function setRightIndicatorBackgroundColor(indicatorBackgroundColor: number): void

  • 参数
参数描述类型非空
indicatorBackgroundColor进度条右指示器背景颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorRadius ​

该方法用于设置进度条指示器圆角。
完整方法声明：function setIndicatorRadius(indicatorRadius: number): void

  • 参数
参数描述类型非空
indicatorRadius进度条指示器圆角number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorRadius ​

该方法用于设置进度条左指示器圆角。
完整方法声明：function setLeftIndicatorRadius(indicatorRadius: number): void

  • 参数
参数描述类型非空
indicatorRadius进度条左指示器圆角number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorRadius ​

该方法用于设置进度条右指示器圆角。
完整方法声明：function setRightIndicatorRadius(indicatorRadius: number): void

  • 参数
参数描述类型非空
indicatorRadius进度条右指示器圆角number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorTextSize ​

该方法用于设置进度条指示器文字大小。
完整方法声明：function setIndicatorTextSize(indicatorTextSize: number): void

  • 参数
参数描述类型非空
indicatorTextSize进度条指示器文字大小number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorTextSize ​

该方法用于设置进度条左指示器文字大小。
完整方法声明：function setLeftIndicatorTextSize(indicatorTextSize: number): void

  • 参数
参数描述类型非空
indicatorTextSize进度条左指示器文字大小number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorTextSize ​

该方法用于设置进度条右指示器文字大小。
完整方法声明：function setRightIndicatorTextSize(indicatorTextSize: number): void

  • 参数
参数描述类型非空
indicatorTextSize进度条右指示器文字大小number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorTextColor ​

该方法用于设置进度条指示器文字颜色。
完整方法声明：function setIndicatorTextColor(indicatorTextColor: number): void

  • 参数
参数描述类型非空
indicatorTextColor进度条指示器文字颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorTextColor ​

该方法用于设置进度条左指示器文字颜色。
完整方法声明：function setLeftIndicatorTextColor(indicatorTextColor: number): void

  • 参数
参数描述类型非空
indicatorTextColor进度条左指示器文字颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorTextColor ​

该方法用于设置进度条右指示器文字颜色。
完整方法声明：function setRightIndicatorTextColor(indicatorTextColor: number): void

  • 参数
参数描述类型非空
indicatorTextColor进度条右指示器文字颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorArrowSize ​

该方法用于设置进度条指示器箭头的尺寸。
完整方法声明：function setIndicatorArrowSize(indicatorArrowSize: number): void

  • 参数
参数描述类型非空
indicatorArrowSize进度条指示器箭头的尺寸number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorArrowSize ​

该方法用于设置进度条左指示器箭头的尺寸。
完整方法声明：function setLeftIndicatorArrowSize(indicatorArrowSize: number): void

  • 参数
参数描述类型非空
indicatorArrowSize进度条左指示器箭头的尺寸number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorArrowSize ​

该方法用于设置进度条右指示器箭头的尺寸。
完整方法声明：function setRightIndicatorArrowSize(indicatorArrowSize: number): void

  • 参数
参数描述类型非空
indicatorArrowSize进度条右指示器箭头的尺寸number是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorDrawable ​

该方法用于设置进度条指示器图片。
完整方法声明：function setIndicatorDrawable(indicatorDrawable: ESGradient): void

  • 参数
参数描述类型非空
indicatorDrawable指示器图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorDrawable ​

该方法用于设置进度条左指示器图片。
完整方法声明：function setLeftIndicatorDrawable(indicatorDrawable: ESGradient): void

  • 参数
参数描述类型非空
indicatorDrawable左指示器图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorDrawable ​

该方法用于设置进度条右指示器图片。
完整方法声明：function setRightIndicatorDrawable(indicatorDrawable: ESGradient): void

  • 参数
参数描述类型非空
indicatorDrawable右指示器图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setIndicatorUrl ​

该方法用于设置进度条指示器图片网络地址。
完整方法声明：function setIndicatorUrl(indicatorUrl: string): void

  • 参数
参数描述类型非空
indicatorUrl指示器图片网络地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftIndicatorUrl ​

该方法用于设置进度条左指示器图片网络地址。
完整方法声明：function setLeftIndicatorUrl(indicatorUrl: string): void

  • 参数
参数描述类型非空
indicatorUrl左指示器图片网络地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightIndicatorUrl ​

该方法用于设置进度条右指示器图片网络地址。
完整方法声明：function setRightIndicatorUrl(indicatorUrl: string): void

  • 参数
参数描述类型非空
indicatorUrl右指示器图片网络地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbWidth ​

该方法用于设置进度条滑块的宽度。
完整方法声明：function setThumbWidth(thumbWidth: number): void

  • 参数
参数描述类型非空
thumbWidth滑块的宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbWidth ​

该方法用于设置进度条左滑块的宽度。
完整方法声明：function setLeftThumbWidth(thumbWidth: number): void

  • 参数
参数描述类型非空
thumbWidth左滑块的宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbWidth ​

该方法用于设置进度条右滑块的宽度。
完整方法声明：function setRightThumbWidth(thumbWidth: number): void

  • 参数
参数描述类型非空
thumbWidth右滑块的宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbHeight ​

该方法用于设置进度条滑块的高度。
完整方法声明：function setThumbHeight(thumbHeight: number): void

  • 参数
参数描述类型非空
thumbHeight滑块的高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbHeight ​

该方法用于设置进度条左滑块的高度。
完整方法声明：function setLeftThumbHeight(thumbHeight: number): void

  • 参数
参数描述类型非空
thumbHeight左滑块的高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbHeight ​

该方法用于设置进度条右滑块的高度。
完整方法声明：function setRightThumbHeight(thumbHeight: number): void

  • 参数
参数描述类型非空
thumbHeight右滑块的高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

scaleThumb ​

该方法用于进度条滑块形变。
完整方法声明：function scaleThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

scaleLeftThumb ​

该方法用于进度条左滑块形变。
完整方法声明：function scaleLeftThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

scaleRightThumb ​

该方法用于进度条右滑块形变。
完整方法声明：function scaleRightThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

resetThumb ​

该方法用于重置进度条滑块。
完整方法声明：function resetThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

resetLeftThumb ​

该方法用于重置进度条左滑块。
完整方法声明：function resetLeftThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

resetRightThumb ​

该方法用于重置进度条右滑块。
完整方法声明：function resetRightThumb(): void

  • 参数

无

  • 返回值：
属性描述类型默认值
无无返回值void

setThumbScaleRatio ​

该方法用于设置进度条滑块的变形度。
完整方法声明：function setThumbScaleRatio(thumbScaleRatio: number): void

  • 参数
参数描述类型非空
thumbScaleRatio滑块的变形度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbScaleRatio ​

该方法用于设置进度条左滑块的变形度。
完整方法声明：function setLeftThumbScaleRatio(thumbScaleRatio: number): void

  • 参数
参数描述类型非空
thumbScaleRatio左滑块的变形度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbScaleRatio ​

该方法用于设置进度条右滑块的变形度。
完整方法声明：function setRightThumbScaleRatio(thumbScaleRatio: number): void

  • 参数
参数描述类型非空
thumbScaleRatio右左滑块的变形度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbActivate ​

该方法用于激活进度条滑块。
完整方法声明：function setThumbActivate(activate: boolean): void

  • 参数
参数描述类型非空
activate激活进度条滑块boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbActivate ​

该方法用于激活进度条左滑块。
完整方法声明：function setLeftThumbActivate(activate: boolean): void

  • 参数
参数描述类型非空
activate激活进度条左滑块boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbActivate ​

该方法用于激活进度条右滑块。
完整方法声明：function setRightThumbActivate(activate: boolean): void

  • 参数
参数描述类型非空
activate激活进度条右滑块boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbDrawable ​

该方法用于设置进度条滑块图片。
完整方法声明：function setThumbDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable滑块图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbDrawable ​

该方法用于设置进度条左滑块图片。
完整方法声明：function setLeftThumbDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable左滑块图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbDrawable ​

该方法用于设置进度条右滑块图片。
完整方法声明：function setRightThumbDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable右滑块图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbUrl ​

该方法用于设置进度条滑块图片地址。
完整方法声明：function setThumbUrl(url: string): void

  • 参数
参数描述类型非空
url滑块图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbUrl ​

该方法用于设置进度条左滑块图片地址。
完整方法声明：function setLeftThumbUrl(url: string): void

  • 参数
参数描述类型非空
url左滑块图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbUrl ​

该方法用于设置进度条右滑块图片地址。
完整方法声明：function setRightThumbUrl(url: string): void

  • 参数
参数描述类型非空
url右滑块图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbInactivatedDrawable ​

该方法用于设置进度条滑块非激活状态图片。
完整方法声明：function setThumbInactivatedDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable滑块非激活状态图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbInactivatedDrawable ​

该方法用于设置进度条左滑块非激活状态图片。
完整方法声明：function setLeftThumbInactivatedDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable左滑块非激活状态图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbInactivatedDrawable ​

该方法用于设置进度条右滑块非激活状态图片。
完整方法声明：function setRightThumbInactivatedDrawable(drawable: ESGradient): void

  • 参数
参数描述类型非空
drawable右滑块非激活状态图片ESGradient是
  • 返回值：
属性描述类型默认值
无无返回值void

setThumbInactivatedUrl ​

该方法用于设置进度条滑块非激活状态图片地址。
完整方法声明：function setThumbInactivatedUrl(url: string): void

  • 参数
参数描述类型非空
url滑块非激活状态图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setLeftThumbInactivatedUrl ​

该方法用于设置进度条左滑块非激活状态图片地址。
完整方法声明：function setLeftThumbInactivatedUrl(url: string): void

  • 参数
参数描述类型非空
url左滑块非激活状态图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setRightThumbInactivatedUrl ​

该方法用于设置进度条右滑块非激活状态图片地址。
完整方法声明：function setRightThumbInactivatedUrl(url: string): void

  • 参数
参数描述类型非空
url右滑块非激活状态图片地址string是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkMode ​

该方法用于设置进度条刻度模式。
完整方法声明：function setTickMarkMode(tickMarkMode: QTSeekBarTickMarkMode): void

  • 参数
参数描述类型非空
tickMarkMode刻度模式QTSeekBarTickMarkMode是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkGravity ​

该方法用于设置进度条刻度位置。
完整方法声明：function setTickMarkGravity(tickMarkGravity: QTSeekBarTickMarkGravity): void

  • 参数
参数描述类型非空
tickMarkGravity刻度位置QTSeekBarTickMarkGravity是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkLayoutGravity ​

该方法用于设置进度条刻度在父视图位置。
完整方法声明：function setTickMarkLayoutGravity(tickMarkLayoutGravity: QTSeekBarTickMarkLayoutGravity): void

  • 参数
参数描述类型非空
tickMarkLayoutGravity刻度在父视图位置QTSeekBarTickMarkLayoutGravity是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkTextArray ​

该方法用于设置进度条刻度文字。
完整方法声明：function setTickMarkTextArray(tickMarkTextArray: Array<string>): void

  • 参数
参数描述类型非空
tickMarkTextArray刻度文字Array<string>是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkTextMargin ​

该方法用于设置进度条刻度文字Margin。
完整方法声明：function setTickMarkTextMargin(tickMarkTextMargin: number): void

  • 参数
参数描述类型非空
tickMarkTextMargin刻度文字Marginnumber是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkTextSize ​

该方法用于设置进度条刻度文字大小。
完整方法声明：function setTickMarkTextSize(tickMarkTextSize: number)

  • 参数
参数描述类型非空
tickMarkTextSize刻度文字大小number是
  • 返回值：
属性描述类型默认值
无无返回值void

setTickMarkInRangeTextColor ​

该方法用于设置进度条刻度文字颜色。
完整方法声明：function setTickMarkInRangeTextColor(tickMarkInRangeTextColor: number)

  • 参数
参数描述类型非空
tickMarkInRangeTextColor刻度文字颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setSteps ​

该方法用于设置进度条步长个数。
完整方法声明：function setSteps(steps: number): void

  • 参数
参数描述类型非空
steps步长个数number是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsWidth ​

该方法用于设置进度条步长宽度。
完整方法声明：function setStepsWidth(stepsWidth: number): void

  • 参数
参数描述类型非空
stepsWidth步长宽度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsHeight ​

该方法用于设置进度条步长高度。
完整方法声明：function setStepsHeight(stepsHeight: number): void

  • 参数
参数描述类型非空
stepsHeight步长高度number是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsRadius ​

该方法用于设置进度条步长圆角。
完整方法声明：function setStepsRadius(stepsRadius: number): void

  • 参数
参数描述类型非空
stepsRadius步长圆角number是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsColor ​

该方法用于设置进度条步长颜色。
完整方法声明：function setStepsColor(stepsColor: number): void

  • 参数
参数描述类型非空
stepsColor步长颜色number是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsDrawable ​

该方法用于设置进度条步长图片。
完整方法声明：function setStepsDrawable(drawableArray: Array<ESGradient>): void

  • 参数
参数描述类型非空
drawableArray步长图片Array<ESGradient>是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsUrl ​

该方法用于设置进度条步长图片地址。
完整方法声明：function setStepsUrl(urlArray: Array<string>): void

  • 参数
参数描述类型非空
urlArray步长图片地址Array<string>是
  • 返回值：
属性描述类型默认值
无无返回值void

setStepsAutoBonding ​

该方法用于设置进度条步长自动粘合。
完整方法声明：function setStepsAutoBonding(stepsAutoBonding: boolean): void

  • 参数
参数描述类型非空
stepsAutoBonding步长自动粘合boolean是
  • 返回值：
属性描述类型默认值
无无返回值void

基础用法 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <s-text-button text="按钮"/>
      <qt-seek-bar
        ref="seekBarRef"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        @seek-change="onSeekBarChange"
        @focus="onFocusChange"/>
      <s-text-button text="按钮"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ref} from "vue";
import {ESKeyCode} from "@extscreen/es3-core";
import {QTISeekBar} from "@quicktvui/quicktvui3";

const TAG = "ESRangeSeekBar";

export default defineComponent({
  name: '使用初探',
  setup() {
    const log = useESLog()

    const seekBarRef = ref<QTISeekBar>()
    const focused = ref(false)
    const progress = ref(0)
    const maxProgress = ref(200)

    const seekStep = ref(0)
    const seekBarMode = ref(0)

    let progressTimer = null;
    let seekProgressTimer = null
    let seekIntervalTime = null

    function onESCreate(params) {
      initESSeekBar();
    }

    function onSeekBarChange(event) {
      let progress = event.progress;
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, "--------onSeekBarChange------>>>>>" + progress)
      }
    }

    function onFocusChange(event) {
      focused.value = event.isFocused;
      seekBarRef.value?.setThumbActivate(focused.value);
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, event.isFocused + "-----onFocusChange------>>>>>" + focused.value)
      }
    }

    function initESSeekBar() {
      seekBarRef.value?.setSeekBarMode(1);
      seekBarRef.value?.setProgressHeight(10);
      seekBarRef.value?.setGravity(2);
      seekBarRef.value?.setProgressRadius(10);
      seekBarRef.value?.setRange(0, maxProgress.value, 10);

      seekBarRef.value?.setProgressColor(0xFFFF3823);
      seekBarRef.value?.setProgressDefaultColor(0xFFDCDCDC);

      seekBarRef.value?.setThumbWidth(40);
      seekBarRef.value?.setThumbHeight(40);

      seekBarRef.value?.setThumbUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/02/08/40a9ad3c-ec51-41b3-b144-a215b2e809a5.png');
      seekBarRef.value?.setThumbInactivatedUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/02/08/6115d0e3-5f59-4d36-be44-95cca74caf37.png');

      progressTimer = setInterval(() => {
        if (isSeekMode()) {
          return;
        }
        progress.value = progress.value + 2;
        if (progress.value > maxProgress.value) {
          return;
        }
        seekBarRef.value?.setProgress(progress.value);
      }, 1000);

    }

    function isSeekBarFocused() {
      return focused.value;
    }

    function startSeek(forward) {
      seekBarMode.value = 1;
      seekStep.value += 1;
      let base = 1;
      if (seekStep.value > 20) {
        base = 2;
      } else if (seekStep.value > 50) {
        base = 4;
      } else if (seekStep.value > 100) {
        base = 6;
      }
      let duration = maxProgress.value;
      let seekProgress = Math.floor(duration * 0.01 * base);
      progress.value = progress.value + (forward ? seekProgress : -seekProgress);

      if (progress.value > duration) {
        progress.value = duration;
      } else if (progress.value < 0) {
        progress.value = 0;
      }

      let now = new Date().getTime();
      if (now - seekIntervalTime > 50) {
        seekBarRef.value?.setProgress(progress.value);
        seekIntervalTime = now;
      }
    }

    function stopSeek() {
      seekBarMode.value = 0;
      seekStep.value = 0;
    }

    function isSeekMode() {
      return seekBarMode.value === 1;
    }

    function onKeyDown(keyEvent) {
      if (keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_LEFT
        || keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT) {
        if (isSeekBarFocused()) {
          startSeek(keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT);
        }
      }
    }

    function onKeyUp(keyEvent) {
      if (keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_LEFT
        || keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT) {
        if (isSeekBarFocused()) {
          stopSeek();
        }
      }
    }

    function onESDestroy() {
      if (progressTimer) {
        clearInterval(progressTimer);
      }
    }

    return {
      seekBarRef,
      focused,
      progress,
      maxProgress,
      seekStep,
      seekBarMode,
      onESCreate,
      onSeekBarChange,
      onFocusChange,
      initESSeekBar,
      isSeekBarFocused,
      startSeek,
      stopSeek,
      isSeekMode,
      onKeyDown,
      onKeyUp,
      onESDestroy,
    }
  },
});

</script>

<style>

</style>

单向模式 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <s-text-button text="按钮"/>
      <qt-seek-bar
        ref="seekBarRef"
        class="es-range-seek-bar-css"
        @seek-change="onSeekBarChange"
        @focus="onFocusChange"
        style="height: 500px;"
        :focusable="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";
import {ref} from "vue";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {QTISeekBar} from "@quicktvui/quicktvui3";

const TAG = "ESSeekBar";

export default defineComponent({
  name: '单向模式',
  setup() {

    const log = useESLog()

    const progressRef = ref(0)
    const seekBarRef = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBar();
    }

    function onSeekBarChange(event) {
      let progress = event.progress;
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, "--------onSeekBarChange------>>>>>" + progress)
      }
    }

    function onFocusChange(event) {
      let focused = event.isFocused;
      seekBarRef.value?.setThumbActivate(focused);
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, "--------onFocusChange------>>>>>" + focused)
      }
    }

    function initESSeekBar() {
      seekBarRef.value?.setSeekBarMode(1);
      setInterval(() => {
        progressRef.value = progressRef.value + 10;
        seekBarRef.value?.setProgress(progressRef.value);
      }, 1000)
      seekBarRef.value?.setProgressHeight(30);
      seekBarRef.value?.setRange(10, 100, 0);
      seekBarRef.value?.setGravity(2);
      seekBarRef.value?.setProgressRadius(100);

      seekBarRef.value?.setProgress(10);
      //
      seekBarRef.value?.setProgressColor(0xFFFF0000);
      seekBarRef.value?.setProgressDefaultColor(0xFFFF00FF);

      seekBarRef.value?.setThumbWidth(40);
      seekBarRef.value?.setThumbHeight(40);

      //

      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setThumbDrawable(thumbDrawable);

      let thumbInactivatedDrawable = {
        colors: ['#FFFF0000', '#FFFF00FF'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);
      //
      seekBarRef.value?.setIndicatorShowMode(3);
      seekBarRef.value?.setIndicatorWidth(100);
      seekBarRef.value?.setIndicatorHeight(100);
      seekBarRef.value?.setIndicatorBackgroundColor(0xFFFF0000);
      seekBarRef.value?.setIndicatorRadius(100);
      seekBarRef.value?.setIndicatorArrowSize(6);
      seekBarRef.value?.setIndicatorTextColor(0xFFFF00FF);
      seekBarRef.value?.setIndicatorTextSize(40);
      seekBarRef.value?.setIndicatorMargin(20);
    }

    return {
      progressRef,
      seekBarRef,
      onESCreate,
      onSeekBarChange,
      onFocusChange,
      initESSeekBar
    }
  },
});

</script>

<style>

</style>

范围模式 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seekBarRef"
        class="es-range-seek-bar-css"
        @seek-change="onSeekBarChange"
        @focus="onFocusChange"
        style="height: 500px;"
        :focusable="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">

import {ref} from "vue";
import {defineComponent} from "@vue/runtime-core";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {QTISeekBar} from "@quicktvui/quicktvui3";

const TAG = "ESSeekBar";

export default defineComponent({
  name: '范围模式',
  setup() {
    const log = useESLog()
    const progressRef = ref(0)
    const seekBarRef = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBar();
    }

    function onSeekBarChange(event) {
      let progress = event.progress;
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, "--------onSeekBarChange------>>>>>" + progress)
      }
    }

    function onFocusChange(event) {
      let focused = event.isFocused;
      seekBarRef.value?.setThumbActivate(focused);
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, "--------onFocusChange------>>>>>" + focused)
      }
    }

    function initESSeekBar() {
      seekBarRef.value?.setSeekBarMode(2);
      setInterval(() => {
        progressRef.value = progressRef.value + 10;
        seekBarRef.value?.setRangeProgress(progressRef.value, 100 - progressRef.value);
      }, 1000)
      seekBarRef.value?.setProgressHeight(30);
      seekBarRef.value?.setRange(10, 100, 0);
      seekBarRef.value?.setGravity(2);
      seekBarRef.value?.setProgressRadius(100);
      //
      seekBarRef.value?.setRangeProgress(10, 100);
      //
      seekBarRef.value?.setProgressColor(0xFFFF0000);
      seekBarRef.value?.setProgressDefaultColor(0xFFFF00FF);

      seekBarRef.value?.setLeftThumbWidth(40);
      seekBarRef.value?.setLeftThumbHeight(40);
      //
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setThumbDrawable(thumbDrawable);

      let thumbInactivatedDrawable = {
        colors: ['#FFFF0000', '#FFFF00FF'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);


      seekBarRef.value?.setRightThumbWidth(40);
      seekBarRef.value?.setRightThumbHeight(40);
      let rightThumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setRightThumbDrawable(rightThumbDrawable);
      let rightThumbInactivatedDrawable = {
        colors: ['#FF00CCCC', '#FFCC7700'],
        cornerRadius: 100,
        orientation: 6
      }
      seekBarRef.value?.setRightThumbInactivatedDrawable(rightThumbInactivatedDrawable);

      //
      seekBarRef.value?.setIndicatorShowMode(3);
      seekBarRef.value?.setIndicatorWidth(100);
      seekBarRef.value?.setIndicatorHeight(100);
      seekBarRef.value?.setIndicatorBackgroundColor(0xFFFF0000);
      seekBarRef.value?.setIndicatorRadius(100);
      seekBarRef.value?.setIndicatorArrowSize(6);
      seekBarRef.value?.setIndicatorTextColor(0xFFFF00FF);
      seekBarRef.value?.setIndicatorTextSize(40);
      seekBarRef.value?.setIndicatorMargin(20);
    }

    return {
      progressRef,
      seekBarRef,
      onESCreate,
      onSeekBarChange,
      onFocusChange,
      initESSeekBar
    }
  },
});
</script>

<style>

</style>

进度条 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seekBarRef"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {ref} from "vue";
import {QTISeekBar} from "@quicktvui/quicktvui3";

export default defineComponent({
  name: '进度条',
  setup() {

    const seekBarRef = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBar();
    }

    function initESSeekBar() {
      seekBarRef.value?.setSeekBarMode(1);
      seekBarRef.value?.setProgressHeight(40);
      seekBarRef.value?.setGravity(2);
      seekBarRef.value?.setProgressRadius(10);
      seekBarRef.value?.setProgress(40);
    }

    return {
      seekBarRef,
      onESCreate,
      initESSeekBar
    }
  },
});

</script>

<style>

</style>

提示框 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seekBarRef"
        class="es-range-seek-bar-css"
        style="height: 500px"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";
import {ref} from "vue";
import {QTISeekBar} from "@quicktvui/quicktvui3";

export default defineComponent({
  name: '提示框',
  setup() {
    const progressRef = ref(0)
    const seekBarRef = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBar();
    }

    function initESSeekBar() {
      seekBarRef.value?.setSeekBarMode(1);
      seekBarRef.value?.setProgressHeight(10);
      seekBarRef.value?.setGravity(2);
      seekBarRef.value?.setProgressRadius(100);
      seekBarRef.value?.setProgress(20);

      //
      seekBarRef.value?.setIndicatorShowMode(3);
      seekBarRef.value?.setIndicatorWidth(100);
      seekBarRef.value?.setIndicatorHeight(100);

      seekBarRef.value?.setIndicatorBackgroundColor(0xFFFF0000);
      seekBarRef.value?.setIndicatorRadius(20);

      seekBarRef.value?.setIndicatorArrowSize(10);
      seekBarRef.value?.setIndicatorTextColor(0xFFFF00FF);
      seekBarRef.value?.setIndicatorTextSize(50);
      seekBarRef.value?.setIndicatorMargin(20);

      //设置dr
      let indicatorDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 0,
        orientation: 6
      }
      seekBarRef.value?.setIndicatorDrawable(indicatorDrawable);
      // seekBarRef.value?.setIndicatorUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/02/22/f241e7e7-f9d0-407a-9dc1-24c88a361594.jpg');
    }

    return {
      progressRef,
      seekBarRef,
      onESCreate,
      initESSeekBar,
    }
  },
});
</script>

<style>

</style>

按钮 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seek_bar_drawable"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
      <qt-seek-bar
        ref="seek_bar_url"
        class="es-range-seek-bar-css"
        style="margin-top: 20px"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
      <qt-seek-bar
        ref="seek_bar_scale"
        class="es-range-seek-bar-css"
        style="margin-top: 20px"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent} from "@vue/runtime-core";
import {ref} from "vue";
import {QTISeekBar} from "@quicktvui/quicktvui3";

export default defineComponent({
  name: '按钮',
  setup() {

    const seek_bar_drawable = ref<QTISeekBar>()
    const seek_bar_url = ref<QTISeekBar>()
    const seek_bar_scale = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBarDrawable();
      initESSeekBarUrl();
      initESSeekBarScale();
    }

    function initESSeekBarDrawable() {
      seek_bar_drawable.value?.setSeekBarMode(1);
      seek_bar_drawable.value?.setProgressHeight(10);
      seek_bar_drawable.value?.setGravity(2);
      seek_bar_drawable.value?.setProgressRadius(100);
      seek_bar_drawable.value?.setProgress(40);

      //----------------------使用drawable---------------------------
      seek_bar_drawable.value?.setThumbWidth(40);
      seek_bar_drawable.value?.setThumbHeight(40);
      //
      seek_bar_drawable.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000', '#FF40b883',],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_drawable.value?.setThumbDrawable(thumbDrawable);

      let thumbInactivatedDrawable = {
        colors: ['#FFFF0000', '#FFFF00FF'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_drawable.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);
    }

    function initESSeekBarUrl() {

      //----------------------使用网络地址图片---------------------------
      seek_bar_url.value?.setSeekBarMode(1);
      seek_bar_url.value?.setProgressHeight(10);
      seek_bar_url.value?.setGravity(2);
      seek_bar_url.value?.setProgressRadius(100);
      seek_bar_url.value?.setProgress(40);

      seek_bar_url.value?.setThumbWidth(40);
      seek_bar_url.value?.setThumbHeight(40);

      seek_bar_url.value?.setThumbUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/02/22/f241e7e7-f9d0-407a-9dc1-24c88a361594.jpg');
      seek_bar_url.value?.setThumbInactivatedUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg');

      seek_bar_url.value?.setThumbActivate(false);
    }

    function initESSeekBarScale() {

      //----------------------使用网络地址图片---------------------------
      seek_bar_scale.value?.setSeekBarMode(1);
      seek_bar_scale.value?.setProgressHeight(10);
      seek_bar_scale.value?.setGravity(2);
      seek_bar_scale.value?.setProgressRadius(100);
      seek_bar_scale.value?.setProgress(40);

      seek_bar_scale.value?.setThumbWidth(40);
      seek_bar_scale.value?.setThumbHeight(40);

      //TODO LIULIPENG
      // seek_bar_scale.value?.setThumbScaleRatio(10);
      // seek_bar_scale.value?.scaleThumb();

      seek_bar_scale.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000', '#FF40b883',],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_scale.value?.setThumbDrawable(thumbDrawable);

      let thumbInactivatedDrawable = {
        colors: ['#FFFF0000', '#FFFF00FF'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_scale.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);
    }

    return {
      seek_bar_drawable,
      seek_bar_url,
      seek_bar_scale,
      onESCreate,
      initESSeekBarDrawable,
      initESSeekBarUrl,
      initESSeekBarScale,
    }
  },
});
</script>

<style>

</style>

刻度 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seek_bar_num"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
      <qt-seek-bar
        ref="seek_bar_other"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {ref} from "vue";
import {QTISeekBar} from "@quicktvui/quicktvui3";

export default defineComponent({
  name: '刻度',
  setup() {

    const seek_bar_num = ref<QTISeekBar>()
    const seek_bar_other = ref<QTISeekBar>()

    function onESCreate(params) {
      initNumberESSeekBar();
      initOtherESSeekBar();
    }

    function initNumberESSeekBar() {
      seek_bar_num.value?.setSeekBarMode(1);
      seek_bar_num.value?.setProgressHeight(30);
      seek_bar_num.value?.setProgressWidth(1000);
      seek_bar_num.value?.setGravity(2);
      seek_bar_num.value?.setProgressRadius(100);
      seek_bar_num.value?.setProgress(28);

      //
      seek_bar_num.value?.setProgressColor(0xFFFF0000);
      seek_bar_num.value?.setProgressDefaultColor(0xFFFF00FF);

      //----------------------------按钮------------------------------------
      seek_bar_num.value?.setThumbWidth(40);
      seek_bar_num.value?.setThumbHeight(40);
      seek_bar_num.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_num.value?.setThumbDrawable(thumbDrawable);

      //---------------------------刻度-------------------------------
      seek_bar_num.value?.setTickMarkMode(0);
      seek_bar_num.value?.setTickMarkTextArray(['0', '20', '40', '60', '80', '100']);
      seek_bar_num.value?.setTickMarkTextMargin(40);
      seek_bar_num.value?.setTickMarkTextSize(40);
      seek_bar_num.value?.setTickMarkTextColor(0xFFFF0000);
      seek_bar_num.value?.setTickMarkInRangeTextColor(0xFFFF00FF);
      seek_bar_num.value?.setTickMarkGravity(1);
      seek_bar_num.value?.setTickMarkLayoutGravity(1);
    }

    function initOtherESSeekBar() {
      seek_bar_other.value?.setSeekBarMode(1);
      seek_bar_other.value?.setProgressHeight(30);
      seek_bar_other.value?.setProgressWidth(1000);
      seek_bar_other.value?.setGravity(2);
      seek_bar_other.value?.setProgressRadius(100);
      seek_bar_other.value?.setProgress(20);

      //
      seek_bar_other.value?.setProgressColor(0xFFFF0000);
      seek_bar_other.value?.setProgressDefaultColor(0xFFFF00FF);

      //----------------------------按钮------------------------------------
      seek_bar_other.value?.setThumbWidth(40);
      seek_bar_other.value?.setThumbHeight(40);
      seek_bar_other.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_other.value?.setThumbDrawable(thumbDrawable);
      //---------------------------刻度-------------------------------
      seek_bar_other.value?.setTickMarkMode(1);
      seek_bar_other.value?.setTickMarkTextArray(['1', '2', '3', '4', '5']);
    }

    return {
      seek_bar_num,
      seek_bar_other,
      onESCreate,
      initNumberESSeekBar,
      initOtherESSeekBar
    }
  },
});
</script>

<style>

</style>

分步 ​

点击查看源码
vue
<template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <qt-seek-bar
        ref="seek_bar"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
      <qt-seek-bar
        ref="seek_bar_url"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
      <qt-seek-bar
        ref="seek_bar_none"
        class="es-range-seek-bar-css"
        :enableFocusBorder="true"
        :focusable="true"
        :requestFocus="true"
        focusScale="1.1"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "@vue/runtime-core";
import {QTISeekBar} from "@quicktvui/quicktvui3";

export default defineComponent({
  name: '分步',
  setup() {

    const seek_bar = ref<QTISeekBar>()
    const seek_bar_url = ref<QTISeekBar>()
    const seek_bar_none = ref<QTISeekBar>()

    function onESCreate(params) {
      initESSeekBar();
      initESSeekBarUrl();
      initESSeekBarNone();
    }

    function initESSeekBar() {
      seek_bar.value?.setSeekBarMode(1);
      seek_bar.value?.setProgressHeight(20);
      seek_bar.value?.setProgressWidth(1000);
      seek_bar.value?.setGravity(2);
      seek_bar.value?.setProgressRadius(10);
      seek_bar.value?.setProgress(40);

      seek_bar.value?.setProgressColor(0xFFFF2222);
      seek_bar.value?.setProgressDefaultColor(0xFFFF00FF);

      seek_bar.value?.setThumbWidth(40);
      seek_bar.value?.setThumbHeight(40);
      //
      seek_bar.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar.value?.setThumbDrawable(thumbDrawable);

      //------------------------------分步---------------------------------
      seek_bar.value?.setSteps(4);
      seek_bar.value?.setStepsWidth(40);
      seek_bar.value?.setStepsHeight(40);
      seek_bar.value?.setStepsAutoBonding(true);
      seek_bar.value?.setStepsRadius(100);
      seek_bar.value?.setStepsDrawable([
        {
          colors: ['#FFFF4054', '#FFFF0000'],
          cornerRadius: 10,
          orientation: 6
        },
        {
          colors: ['#FFFF6347', '#FFFF0000'],
          cornerRadius: 10,
          orientation: 6
        },
        {
          colors: ['#FFFFAFAD', '#FFFF0000'],
          cornerRadius: 0,
          orientation: 6
        },
        {
          colors: ['#FFFF8247', '#FFFF0000'],
          cornerRadius: 10,
          orientation: 6
        },
        {
          colors: ['#FFFF00FF', '#FFFF0000'],
          cornerRadius: 10,
          orientation: 6
        },
      ]);

    }

    function initESSeekBarUrl() {
      seek_bar_url.value?.setSeekBarMode(1);
      seek_bar_url.value?.setProgressHeight(20);
      seek_bar_url.value?.setProgressWidth(800);
      seek_bar_url.value?.setGravity(2);
      seek_bar_url.value?.setProgressRadius(10);
      seek_bar_url.value?.setProgress(40);

      seek_bar_url.value?.setProgressColor(0xFFFF2222);
      seek_bar_url.value?.setProgressDefaultColor(0xFFFF00FF);

      seek_bar_url.value?.setThumbWidth(40);
      seek_bar_url.value?.setThumbHeight(40);
      //
      seek_bar_url.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_url.value?.setThumbDrawable(thumbDrawable);
      //------------------------------分步---------------------------------
      seek_bar_url.value?.setSteps(4);
      seek_bar_url.value?.setStepsWidth(100);
      seek_bar_url.value?.setStepsHeight(100);
      seek_bar_url.value?.setStepsAutoBonding(true);
      seek_bar_url.value?.setStepsUrl([
        'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg',
        'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg',
        'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg',
        'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg',
        'https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg',
      ]);
    }

    function initESSeekBarNone() {
      seek_bar_none.value?.setSeekBarMode(1);
      seek_bar_none.value?.setProgressHeight(20);
      seek_bar_none.value?.setProgressWidth(400);
      seek_bar_none.value?.setGravity(2);
      seek_bar_none.value?.setProgressRadius(10);
      seek_bar_none.value?.setProgress(40, 100);

      seek_bar_none.value?.setProgressColor(0xFFFF2222);
      seek_bar_none.value?.setProgressDefaultColor(0xFFFF00FF);

      seek_bar_none.value?.setThumbWidth(40);
      seek_bar_none.value?.setThumbHeight(40);
      //
      seek_bar_none.value?.setThumbActivate(true);
      let thumbDrawable = {
        colors: ['#FFFF00FF', '#FFFF0000'],
        cornerRadius: 100,
        orientation: 6
      }
      seek_bar_none.value?.setThumbDrawable(thumbDrawable);
      seek_bar_none.value?.setStepsRadius(100);
      //------------------------------分步---------------------------------
      seek_bar_none.value?.setSteps(4);
      seek_bar_none.value?.setStepsWidth(60);
      seek_bar_none.value?.setStepsHeight(60);
      seek_bar_none.value?.setStepsAutoBonding(true);
      seek_bar_none.value?.setStepsColor(0xFFFF0000);
    }

    return {
      seek_bar,
      seek_bar_url,
      seek_bar_none,
      onESCreate,
      initESSeekBar,
      initESSeekBarUrl,
      initESSeekBarNone,
    }
  },
});
</script>

<style>

</style>