W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
Progress是進(jìn)度條顯示組件,顯示內(nèi)容通常為某次目標(biāo)操作的當(dāng)前進(jìn)度。具體用法請(qǐng)參考Progress。
- Progress(options: {value: number, total?: number, type?: ProgressType})
該接口用于創(chuàng)建type樣式的進(jìn)度條,其中value用于設(shè)置初始進(jìn)度值,total用于設(shè)置進(jìn)度總長(zhǎng)度,type決定Progress樣式。
- Progress({ value: 24, total: 100, type: ProgressType.Linear }) // 創(chuàng)建一個(gè)進(jìn)度總長(zhǎng)為100,初始進(jìn)度值為24的線性進(jìn)度條
Progress有5種可選類型,在創(chuàng)建時(shí)通過(guò)設(shè)置ProgressType枚舉類型給type可選項(xiàng)指定Progress類型。其分別為:ProgressType.Linear(線性樣式)、 ProgressType.Ring(環(huán)形無(wú)刻度樣式)、ProgressType.ScaleRing(環(huán)形有刻度樣式)、ProgressType.Eclipse(圓形樣式)和ProgressType.Capsule(膠囊樣式)。
從API version9開始,組件高度大于寬度的時(shí)候自適應(yīng)垂直顯示,相等時(shí)仍然保持水平顯示。
- Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
- Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
- // 從左往右,1號(hào)環(huán)形進(jìn)度條,默認(rèn)前景色為藍(lán)色,默認(rèn)strokeWidth進(jìn)度條寬度為2.0vp
- Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
- // 從左往右,2號(hào)環(huán)形進(jìn)度條
- Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
- .color(Color.Grey) // 進(jìn)度條前景色為灰色
- .style({ strokeWidth: 15}) // 設(shè)置strokeWidth進(jìn)度條寬度為15.0vp
- Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
- .backgroundColor(Color.Black)
- .style({ scaleCount: 20, scaleWidth: 5 }) // 設(shè)置環(huán)形有刻度進(jìn)度條總刻度數(shù)為20,刻度寬度為5vp
- Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
- .backgroundColor(Color.Black)
- .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // 設(shè)置環(huán)形有刻度進(jìn)度條寬度15,總刻度數(shù)為20,刻度寬度為5vp
- Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
- .backgroundColor(Color.Black)
- .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) // 設(shè)置環(huán)形有刻度進(jìn)度條寬度15,總刻度數(shù)為20,刻度寬度為3vp
- // 從左往右,1號(hào)圓形進(jìn)度條,默認(rèn)前景色為藍(lán)色
- Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
- // 從左往右,2號(hào)圓形進(jìn)度條,指定前景色為灰色
- Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
1、頭尾兩端圓弧處的進(jìn)度展示效果與ProgressType.Eclipse樣式相同;
2、中段處的進(jìn)度展示效果為矩形狀長(zhǎng)條,與ProgressType.Linear線性樣式相似;
3、組件高度大于寬度的時(shí)候自適應(yīng)垂直顯示。
- Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
- Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
- Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)
- @Entry
- @Component
- struct ProgressCase1 {
- @State progressValue: number = 0 // 設(shè)置進(jìn)度條初始值為0
- build() {
- Column() {
- Column() {
- Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
- .style({strokeWidth:50}).value(this.progressValue)
- Row().width('100%').height(5)
- Button("進(jìn)度條+5")
- .onClick(()=>{
- this.progressValue += 5
- if (this.progressValue > 100){
- this.progressValue = 0
- }
- })
- }
- }.width('100%').height('100%')
- }
- }
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: