色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkTS聲明式組件:Progress

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-27 14:48 ? 次閱讀

Progress

進(jìn)度條組件,用于顯示內(nèi)容加載或操作處理等進(jìn)度。

說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

接口

Progress(options: {value: number, total?: number, type?: ProgressType})

創(chuàng)建進(jìn)度組件,用于顯示內(nèi)容加載或操作處理進(jìn)度。

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名參數(shù)類型必填參數(shù)描述
valuenumber指定當(dāng)前進(jìn)度值。設(shè)置小于0的數(shù)值時置為0,設(shè)置大于total的數(shù)值時置為total。 從API version 9開始,該接口支持在ArkTS卡片中使用。
totalnumber指定進(jìn)度總長。 默認(rèn)值:100 從API version 9開始,該接口支持在ArkTS卡片中使用。
type8+[ProgressType]指定進(jìn)度條類型。 默認(rèn)值:ProgressType.Linear 從API version 9開始,該接口支持在ArkTS卡片中使用。

ProgressType枚舉說明

從API version 9開始,該接口支持在ArkTS卡片中使用。

名稱描述
Linear線性樣式。從API version9開始,高度大于寬度的時候自適應(yīng)垂直顯示。
Ring8+環(huán)形無刻度樣式,環(huán)形圓環(huán)逐漸顯示至完全填充效果。
Eclipse8+圓形樣式,顯示類似月圓月缺的進(jìn)度展示效果,從月牙逐漸變化至滿月。
ScaleRing8+環(huán)形有刻度樣式,顯示類似時鐘刻度形式的進(jìn)度展示效果。從API version9開始,刻度外圈出現(xiàn)重疊的時候自動轉(zhuǎn)換為環(huán)形無刻度進(jìn)度條。
Capsule8+膠囊樣式,頭尾兩端圓弧處的進(jìn)度展示效果與Eclipse相同;中段處的進(jìn)度展示效果與Linear相同。高度大于寬度的時候自適應(yīng)垂直顯示。

屬性

除支持[通用屬性]外,還支持以下屬性:

名稱參數(shù)類型描述
valuenumber設(shè)置當(dāng)前進(jìn)度值。設(shè)置小于0的數(shù)值時置為0,設(shè)置大于total的數(shù)值時置為total。非法數(shù)值不生效。 從API version 9開始,該接口支持在ArkTS卡片中使用。
color[ResourceColor][LinearGradient10+]
backgroundColor[ResourceColor]設(shè)置進(jìn)度條底色。 默認(rèn)值(API version 9):'#19182431' 默認(rèn)值(API version 10): - Capsule:'#33ffffff' - Ring:'#08182431' - 其他樣式:'#19182431' 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**當(dāng)設(shè)置[通用屬性backgroundColor]時,生效的是進(jìn)度條的底色,而不是整個Progress組件的背景色。
style8+[ProgressStyleOptions][CapsuleStyleOptions10+]

ProgressStyleOptions

名稱參數(shù)類型必填描述
strokeWidth[Length]設(shè)置進(jìn)度條寬度(不支持百分比設(shè)置)。 默認(rèn)值:4.0vp
scaleCountnumber設(shè)置環(huán)形進(jìn)度條總刻度數(shù)。 默認(rèn)值:120
scaleWidth[Length]設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)(不支持百分比設(shè)置),刻度粗細(xì)大于進(jìn)度條寬度時,為系統(tǒng)默認(rèn)粗細(xì)。 默認(rèn)值:2.0vp
enableSmoothEffect10+boolean進(jìn)度平滑動效的開關(guān)。開啟平滑動效后設(shè)置進(jìn)度,進(jìn)度會從當(dāng)前值漸變至設(shè)定值,否則進(jìn)度從當(dāng)前值突變至設(shè)定值。 默認(rèn)值:true

CapsuleStyleOptions10+

名稱參數(shù)類型必填描述
borderColor[ResourceColor]內(nèi)描邊顏色。 默認(rèn)值:'#33006cde'
borderWidth[Length]內(nèi)描邊寬度(不支持百分比設(shè)置)。 默認(rèn)值:1vp
contentstring文本內(nèi)容,應(yīng)用可自定義。
font[Font]文本樣式。 默認(rèn)值: - 文本大小(不支持百分比設(shè)置):12fp 其他文本參數(shù)跟隨text組件的主題值。
fontColor[ResourceColor]文本顏色。 默認(rèn)值:'#ff182431'
enableScanEffectboolean掃光效果的開關(guān)。 默認(rèn)值:false
showDefaultPercentageboolean顯示百分比文本的開關(guān),開啟后會在進(jìn)度條上顯示當(dāng)前進(jìn)度的百分比。設(shè)置了content屬性時該屬性不生效。 默認(rèn)值:false
enableSmoothEffectboolean進(jìn)度平滑動效的開關(guān)。開啟平滑動效后設(shè)置進(jìn)度,進(jìn)度會從當(dāng)前值漸變至設(shè)定值,否則進(jìn)度從當(dāng)前值突變至設(shè)定值。 默認(rèn)值:true

RingStyleOptions10+

名稱參數(shù)類型必填描述
strokeWidth[Length]設(shè)置進(jìn)度條寬度(不支持百分比設(shè)置),寬度大于等于半徑時,默認(rèn)修改寬度至半徑值的二分之一。 默認(rèn)值:4.0vp
shadowboolean進(jìn)度條陰影開關(guān)。 默認(rèn)值:false
status[ProgressStatus10+]進(jìn)度條狀態(tài),當(dāng)設(shè)置為LOADING時會開啟檢查更新動效,此時設(shè)置進(jìn)度值不生效。當(dāng)從LOADING設(shè)置為PROGRESSING,檢查更新動效會執(zhí)行到終點(diǎn)再停止。 默認(rèn)值: ProgressStatus.PROGRESSING
enableScanEffectboolean進(jìn)度條掃光效果的開關(guān)。 默認(rèn)值: false
enableSmoothEffectboolean進(jìn)度平滑動效的開關(guān)。開啟平滑動效后設(shè)置進(jìn)度,進(jìn)度會從當(dāng)前值漸變至設(shè)定值,否則進(jìn)度從當(dāng)前值突變至設(shè)定值。 默認(rèn)值:true

LinearStyleOptions10+

名稱參數(shù)類型必填描述
strokeWidth[Length]設(shè)置進(jìn)度條寬度(不支持百分比設(shè)置)。 默認(rèn)值:4.0vp
strokeRadius[PX][VP][LPX]
enableScanEffectboolean進(jìn)度條掃光效果的開關(guān)。 默認(rèn)值: false
enableSmoothEffectboolean進(jìn)度平滑動效的開關(guān)。開啟平滑動效后設(shè)置進(jìn)度,進(jìn)度會從當(dāng)前值漸變至設(shè)定值,否則進(jìn)度從當(dāng)前值突變至設(shè)定值。 默認(rèn)值:true

ScaleRingStyleOptions10+

名稱參數(shù)類型必填描述
strokeWidth[Length]設(shè)置進(jìn)度條寬度(不支持百分比設(shè)置)。 默認(rèn)值:4.0vp
scaleCountnumber設(shè)置環(huán)形進(jìn)度條總刻度數(shù)。 默認(rèn)值:120
scaleWidth[Length]設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)(不支持百分比設(shè)置),刻度粗細(xì)大于進(jìn)度條寬度時,為系統(tǒng)默認(rèn)粗細(xì)。 默認(rèn)值:2.0vp
enableSmoothEffectboolean進(jìn)度平滑動效的開關(guān)。開啟平滑動效后設(shè)置進(jìn)度,進(jìn)度會從當(dāng)前值漸變至設(shè)定值,否則進(jìn)度從當(dāng)前值突變至設(shè)定值。 默認(rèn)值:true

ProgressStatus10+枚舉說明

名稱描述
LOADING加載中。
PROGRESSING進(jìn)度更新中。

事件

支持[通用事件]。
HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151450.png

示例

示例1

各進(jìn)度條基礎(chǔ)屬性效果

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 10, type: ProgressType.Linear }).width(200)
      Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)


      Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
      }

      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
      }

      // scaleCount和scaleWidth效果對比
      Row({ space: 40 }) {
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
      }

      Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Ring }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Ring })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20 })
      }

      Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
        Progress({ value: 20, total: 150, type: ProgressType.Capsule })
          .color(Color.Grey)
          .value(50)
          .width(100)
          .height(50)
      }
    }.width('100%').margin({ top: 30 })
  }
}

progress

示例2

環(huán)形進(jìn)度條視覺屬性

@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
                                                              { color: Color.Orange, offset: 1.0 }])
  build() {
    Column({ space: 15 }) {
      Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(100).style({ strokeWidth: 20 })
        .color(this.gradientColor)

      Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(120).color(Color.Orange)
        .style({ strokeWidth: 20, shadow: true })
    }.width('100%').padding({ top: 5 })
  }
}

ringProgressStyleEffect

示例3

環(huán)形進(jìn)度條動效

@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
                                                              { color: Color.Orange, offset: 1.0 }])
  build() {
    Column({ space: 15 }) {
      Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 0, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Blue)
        .style({ strokeWidth: 20, status: ProgressStatus.LOADING })

      Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 30, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Orange)
        .style({ strokeWidth: 20, enableScanEffect: true })
    }.width('100%').padding({ top: 5 })
  }
}

ringProgressAnimation

示例4

膠囊形進(jìn)度條視覺屬性

@Entry
@Component
struct ProgressExample {

  build() {
    Column({ space: 15 }) {
      Row({ space: 40 }) {
        Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50)
          .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...',
                  font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray,
                  enableScanEffect: false, showDefaultPercentage: false})
      }
    }.width('100%').padding({ top: 5 })
  }
}

capsuleProgressStyleEffect

示例5

進(jìn)度平滑動效

@Entry
@Component
struct Index {
  @State value: number = 0

  build() {
    Column({space: 10}) {
      Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
        .margin({top: 20})
      Progress({value: this.value, total: 100, type:ProgressType.Linear})
        .style({strokeWidth: 10, enableSmoothEffect: true})

      Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
      Progress({value: this.value, total: 100, type:ProgressType.Linear})
        .style({strokeWidth: 10, enableSmoothEffect: false})

      Button('value +10').onClick(() = > {
        this.value += 10
      })
        .width(75)
        .height(15)
        .fontSize(9)
    }
    .width('50%')
    .height('100%')
    .margin({left:20})
  }
}

progressSmoothEffect

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 組件
    +關(guān)注

    關(guān)注

    1

    文章

    512

    瀏覽量

    17819
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2347

    瀏覽量

    42827
收藏 人收藏

    評論

    相關(guān)推薦

    HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS聲明開發(fā)范式

    軌跡。狀態(tài)與數(shù)據(jù)管理狀態(tài)數(shù)據(jù)管理作為基于ArkTS聲明開發(fā)范式的特色,通過功能不同的裝飾器給開發(fā)者提供了清晰的頁面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應(yīng)用程序狀態(tài),兩者協(xié)
    發(fā)表于 01-17 15:09

    鴻蒙ArkTS聲明組件:Blank

    空白填充組件,在容器主軸方向上,空白填充組件具有自動填充容器空余部分的能力。僅當(dāng)父組件為Row/Column/Flex時生效。
    的頭像 發(fā)表于 06-19 16:21 ?552次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Blank

    鴻蒙ArkTS聲明組件:DataPanel

    數(shù)據(jù)面板組件,用于將多個數(shù)據(jù)占比情況使用占比圖進(jìn)行展示。
    的頭像 發(fā)表于 06-21 09:42 ?409次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:DataPanel

    鴻蒙ArkTS聲明組件:Marquee

    跑馬燈組件,用于滾動展示一段單行文本。僅當(dāng)文本內(nèi)容寬度超過跑馬燈組件寬度時滾動,不超過時不滾動。
    的頭像 發(fā)表于 06-25 15:52 ?424次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Marquee

    鴻蒙ArkTS聲明組件:NavDestination

    作為NavRouter組件的子組件,用于顯示導(dǎo)航內(nèi)容區(qū)。
    的頭像 發(fā)表于 06-27 14:05 ?488次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:NavDestination

    鴻蒙ArkTS聲明組件:PatternLock

    圖案密碼鎖組件,以九宮格圖案的方式輸入密碼,用于密碼驗證場景。手指在PatternLock組件區(qū)域按下時開始進(jìn)入輸入狀態(tài),手指離開屏幕時結(jié)束輸入狀態(tài)完成密碼輸入。
    的頭像 發(fā)表于 06-27 09:59 ?459次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:PatternLock

    鴻蒙ArkTS聲明組件:【RichText】

    富文本組件,解析并顯示HTML格式文本。
    的頭像 發(fā)表于 06-29 09:35 ?721次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:【RichText】

    鴻蒙ArkTS聲明組件:ScrollBar

    滾動條組件ScrollBar,用于配合可滾動組件使用,如List、Grid、Scroll。
    的頭像 發(fā)表于 07-01 15:52 ?520次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:ScrollBar

    鴻蒙ArkTS聲明組件:Span

    作為Text組件的子組件,用于顯示行內(nèi)文本的組件
    的頭像 發(fā)表于 07-01 09:14 ?461次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:Span

    鴻蒙ArkTS聲明組件:StepperItem

    用作[Stepper]組件的頁面子組件
    的頭像 發(fā)表于 07-02 17:47 ?407次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:StepperItem

    鴻蒙ArkTS聲明組件:TextArea

    多行文本輸入框組件,當(dāng)輸入的文本內(nèi)容超過組件寬度時會自動換行顯示。
    的頭像 發(fā)表于 07-02 15:02 ?686次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextArea

    鴻蒙ArkTS聲明組件:TextInput

    單行文本輸入框組件
    的頭像 發(fā)表于 07-03 09:14 ?951次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextInput

    鴻蒙ArkTS聲明組件:TextPicker

    滑動選擇文本內(nèi)容的組件
    的頭像 發(fā)表于 07-03 15:07 ?476次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextPicker

    鴻蒙ArkTS聲明組件:TextTimer

    通過文本顯示計時信息并控制其計時器狀態(tài)的組件
    的頭像 發(fā)表于 07-03 17:06 ?508次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:TextTimer

    鴻蒙ArkTS聲明組件:XComponent

    可用于EGL/OpenGLES和媒體數(shù)據(jù)寫入,并顯示在XComponent組件
    的頭像 發(fā)表于 07-05 09:56 ?681次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>組件</b>:XComponent
    主站蜘蛛池模板: 中文字AV字幕在线观看| 色多多污网站在线观看| 日韩毛片在线视频| 在线视频免费观看| 国产午夜在线精品三级a午夜电影| 亲伦在线观看| 最近2019中文字幕免费| 好大好硬好湿再深一点网站| 日韩特黄特色大片免费视频| 99国产在线观看| 久久亚洲精品专区蓝色区| 亚洲AV久久婷婷蜜臀无码不卡| 抽插H浊水H嫩B父皇| 欧美GAY猛男GAYA片18禁| 中国人泡妞www免费| 极品虎白在线观看| 性色少妇AV蜜臀人妻无码 | 97色色极品av影院| 久久精品AV一区二区无码| 亚洲第一国产| 国产情侣真实露脸在线| 沙发上小泬12P| 超碰免费视频部落格| 欧美精品XXXXBBBB| 8X拨牐拨牐X8免费视频8| 久久天天躁狠狠躁夜夜躁| 一天不停的插BB十几次| 回复术士人生重启在线观看| 亚洲qingse中文字幕久久| 国产精品无码AV天天爽色欲 | 久久久免费观看| 伊人AV一区二区三区夜色撩人| 国产婷婷色综合AV蜜臀AV| 污文乖不疼的| 国产麻豆AV伦| 亚洲AV 无码AV 中文字幕| 国产精品自在在线午夜精品| 特黄特色大片免费播放器9| 国产 亚洲 日韩 欧美 在线观看| 日本亚洲精品无码区国产电影| 波野结衣qvod|