《HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-4-2進(jìn)度條與滑動(dòng)條

進(jìn)度條和滑動(dòng)條進(jìn)度條組件ProgressProgress進(jìn)度條，用于顯示內(nèi)容加載進(jìn)度或操作處理進(jìn)度等。不同類(lèi)型的進(jìn)度條Progress參數(shù)：value：指定當(dāng)前進(jìn)度值（必填）total：指定進(jìn)度總長(zhǎng)，默認(rèn)值100.（選填）type：指定進(jìn)度條類(lèi)型，默認(rèn)值ProgressType.Linear（選填）Progress常用屬性color：進(jìn)度條的顏色，默認(rèn)為藍(lán)色style：進(jìn)度條的樣式，樣式內(nèi)的可選設(shè)置有strokeWidth：設(shè)置進(jìn)度條寬度scaleCount：設(shè)置環(huán)形進(jìn)度條總刻度scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)value：當(dāng)前進(jìn)度，會(huì)覆蓋參數(shù)的當(dāng)前進(jìn)度進(jìn)度條組件Progress-使用示例Progress({

value:

85,

//參數(shù)1：必選,當(dāng)前進(jìn)度

total:100,

//參數(shù)2：可選,最大進(jìn)度,默認(rèn)100

type:

ProgressType.ScaleRing

//參數(shù)3：可選,進(jìn)度條類(lèi)型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進(jìn)度條的顏色,默認(rèn)為藍(lán)色

.style({

//屬性2：設(shè)置進(jìn)度條的樣式

strokeWidth:20,

//strokeWidth：設(shè)置進(jìn)度條寬度

scaleCount:100,

//scaleCount：設(shè)置環(huán)形進(jìn)度條總刻度數(shù)

scaleWidth:10

//scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)

})

.value(22)

//屬性3：當(dāng)前進(jìn)度,會(huì)覆蓋參數(shù)的當(dāng)前進(jìn)度滑動(dòng)條組件Slider滑動(dòng)條組件Slider，用來(lái)快速調(diào)節(jié)音量、亮度等。Slider組件默認(rèn)寬度為父容器寬度的100%。Slider常用的參數(shù)：Slider(value:{value?:

number,

//當(dāng)前進(jìn)度值,默認(rèn)值0

min?:

number,

//設(shè)置最小值,默認(rèn)值0max?:

number,

//設(shè)置最大值,默認(rèn)值100step?:

number,

//設(shè)置Slider滑動(dòng)跳動(dòng)值,默認(rèn)值1style?:

SliderStyle

//設(shè)置Slider的滑塊樣式,默認(rèn)值OutSet})滑動(dòng)條組件SliderSliderStyle的取值有兩種SliderStyle.OutSet：滑塊在滑軌上SliderStyle.InSet：滑塊在滑軌內(nèi)Slider(){...

}

.blockColor(Color.Red)//設(shè)置滑塊的顏色

.selectedColor(Color.Green)//設(shè)置滑軌的已滑動(dòng)顏色

.showSteps(true)//默認(rèn)值false,設(shè)置當(dāng)前是否顯示步長(zhǎng)刻度值

.showTips(true)//默認(rèn)值false,設(shè)置滑動(dòng)時(shí)是否顯示氣泡提示百分比}Slider常用的屬性滑動(dòng)條組件SliderSlider滑動(dòng)時(shí)觸發(fā)onChange的事件回調(diào)，在回調(diào)方法內(nèi)箭頭函數(shù)的參數(shù)value為當(dāng)前進(jìn)度值，mode為拖動(dòng)狀態(tài)。其中mode有4種：SliderChangeMode.Begin：開(kāi)始拖動(dòng)滑塊。SliderChangeMode.Moving：正在拖動(dòng)滑塊過(guò)程中。SliderChangeMode.End：結(jié)束拖動(dòng)滑塊。SliderChangeMode.Click：點(diǎn)擊滑動(dòng)條使滑塊位置移動(dòng)。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})滑動(dòng)組件Slider-使用示例@Entry@Componentstruct

SliderExample

{

@State

inSetValue:

number

=

40

build()

{

Column({

space:

8

})

{

Text('滑塊在導(dǎo)軌內(nèi)').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)

Row()

{

Slider({

value:

this.inSetValue,

step:

10,

style:

SliderStyle.InSet

})

.blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1')

.showSteps(true)

.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

this.inSetValue

=

value

console.info('value:'

+

value

+

'mode:'

+

mode.toSt