滑動條組件，通常用于用快速調(diào)節(jié)設(shè)置值，如音量調(diào)節(jié)、亮度調(diào)節(jié)等應(yīng)用場景。
說明
Slider暫不支持混合頁面場景。
子組件
無
構(gòu)造函數(shù)
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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Float64
|
否
|
0.0
|
當前進度值。
|
|
min
|
Float64
|
否
|
0.0
|
設(shè)置最小值。
|
|
max
|
Float64
|
否
|
100.0
|
設(shè)置最大值。
|
|
step
|
Float64
|
否
|
1.0
|
設(shè)置滑動條滑動步長。
說明：
當step<=0時，取max-min的值。
|
|
style
|
SliderStyle
|
否
|
SliderStyle.OutSet
|
設(shè)置滑動條的滑塊樣式。
|
|
direction
|
Axis
|
否
|
Axis.Horizontal
|
設(shè)置滑動條滑動方向為水平或豎直方向。
|
|
reverse
|
Bool
|
否
|
false
|
設(shè)置滑動條取值范圍是否反向。
說明：
設(shè)置為false時，水平方向滑動條為從左向右滑動，豎直方向滑動條從上向下滑動。
設(shè)置為true時，水平方向滑動條為從右向左滑動，豎直方向滑動條從下向上滑動。
|
函數(shù)
blockColor(Color)
public func blockColor(value: Color): This
根據(jù)指定的Color設(shè)置滑塊的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Color
|
是
|
Color(0xFFFFFF)
|
滑塊的顏色。
|
blockColor(UInt32)
public func blockColor(value: UInt32): This
根據(jù)指定的色值設(shè)置滑塊的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
UInt32
|
是
|
0xFFFFFF
|
滑塊的顏色。
|
blockColor(CJResource)
public func blockColor(value: CJResource): This
根據(jù)指定的資源文件設(shè)置滑塊的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
CJResource
|
是
|
|
滑塊的顏色。
|
trackColor(Color)
public func trackColor(value: Color): This
根據(jù)指定的Color設(shè)置滑軌的背景顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Color
|
是
|
Color(0xDBDBDB)
|
滑軌的背景顏色。
|
trackColor(UInt32)
public func trackColor(value: UInt32): This
根據(jù)指定的色值設(shè)置滑軌的背景顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
UInt32
|
是
|
0xDBDBDB
|
滑軌的背景顏色。
|
trackColor(CJResource)
public func trackColor(value: CJResource): This
根據(jù)指定的資源文件設(shè)置滑軌的背景顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
CJResource
|
是
|
|
滑軌的背景顏色。
|
selectedColor(Color)
public func selectedColor(value: Color): This
根據(jù)指定的Color設(shè)置滑軌已滑動部分的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Color
|
是
|
Color(0x007DFF)
|
滑軌已滑動部分的顏色。
|
selectedColor(UInt32)
public func selectedColor(value: UInt32): This
根據(jù)指定的色值設(shè)置滑軌已滑動部分的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
UInt32
|
是
|
0x007DFF
|
滑軌已滑動部分的顏色。
|
selectedColor(CJResource)
public func selectedColor(value: CJResource): This
根據(jù)指定的資源文件設(shè)置滑軌已滑動部分的顏色。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
CJResource
|
是
|
|
滑軌已滑動部分的顏色。
|
showSteps(Bool)
public func showSteps(value: Bool): This
設(shè)置當前是否顯示步長刻度值。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Bool
|
是
|
false
|
當前是否顯示步長刻度值。
|
showTips(Bool)
public func showTips(value: Bool): This
設(shè)置滑動時是否顯示氣泡提示。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Bool
|
是
|
false
|
滑動時是否顯示氣泡提示。
|
trackThickness(Length)
public func trackThickness(value: Length): This
根據(jù)指定的Length設(shè)置滑軌的粗細。設(shè)置為小于等于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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Length
|
是
|
|
滑軌的粗細。
|
trackThickness(Int64)
public func trackThickness(value: Int64): This
根據(jù)指定的整數(shù)值設(shè)置滑軌的粗細。設(shè)置為小于等于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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Int64
|
是
|
|
滑軌的粗細。
|
trackThickness(Float64)
public func trackThickness(value: Float64): This
根據(jù)指定的浮點值設(shè)置滑軌的粗細。設(shè)置為小于等于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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Float64
|
是
|
|
滑軌的粗細。
|
minLabel(Float64)
public func minLabel(value: Float64): This
根據(jù)指定的浮點值設(shè)置可滑動的最小值。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Float64
|
是
|
0.0
|
最小值。
|
maxLabel(Float64)
public func maxLabel(value: Float64): This
根據(jù)指定的浮點值設(shè)置可滑動的最大值。
<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>
|
參數(shù)名
|
參數(shù)類型
|
必填
|
默認值
|
描述
|
|
value
|
Float64
|
是
|
100.0
|
最大值。
|
枚舉說明
SliderStyle
Slider組件滑塊與滑軌顯示樣式枚舉。
<colgroup data-id="c7104f7d-V2RrQYMe"><col data-id="cd89ecb0-B7AudFpy"><col data-id="cd89ecb0-NhjSQoFm"></colgroup>
|
名稱
|
描述
|
|
OutSet
|
滑塊在滑軌上
|
|
InSet
|
滑塊在滑軌內(nèi)
|
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
|
用戶結(jié)束拖動滑塊
|
|
Click
|
用戶點擊滑動條使滑塊位置移動
|
事件
onChange((Float64, SliderChangeMode)->Unit)
public func onChange(callback: (Float64, SliderChangeMode)->Unit): This
Slider拖動或點擊時觸發(fā)事件回調(diào)。
<colgroup data-id="c7104f7d-wIkqqZv9"><col data-id="cd89ecb0-DPASk5OL"><col data-id="cd89ecb0-ZTmrJJ4x"><col data-id="cd89ecb0-RkRkwKuv"></colgroup>
|
參數(shù)名
|
參數(shù)類型
|
描述
|
|
onChcallbackange
|
(Float64, SliderChangeMode)->Unit
|
Slider滑動時觸發(fā)事件回調(diào)。
|
onChange(()->Unit)
public func onChange(callback: ()->Unit): This
Slider拖動或點擊時觸發(fā)事件回調(diào)。
<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>
|
參數(shù)名
|
參數(shù)類型
|
描述
|
|
callback
|
()->Unit
|
Slider滑動時觸發(fā)事件回調(diào)。
|
通用屬性/通用事件
通用屬性：不支持觸摸熱區(qū)設(shè)置。
通用事件：僅支持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)]
如對您有幫助，幫忙點個“在看 、關(guān)注” 讓更多的人受益~！
技術(shù)交流群可加wx“LB-9191” 備注cangjie
