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

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkTS聲明式組件:DataPanel

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-21 09:42 ? 次閱讀

DataPanel

數據面板組件,用于將多個數據占比情況使用占比圖進行展示。

說明:
發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

子組件

接口

DataPanel(options:{values: number[], max?: number, type?: DataPanelType})

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

參數:

參數名參數類型必填參數描述
valuesnumber[]數據值列表,最多包含9個數據,大于9個數據則取前9個數據。若數據值小于0則置為0。
maxnumber- max大于0,表示數據的最大值。 - max小于等于0,max等于value數組各項的和,按比例顯示。 默認值:100
type8+[DataPanelType]數據面板的類型(不支持動態修改)。 默認值:DataPanelType.Circle

DataPanelType枚舉說明

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

名稱描述
Line線型數據面板。
Circle環形數據面板。

屬性

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

名稱參數類型描述
closeEffectboolean關閉數據占比圖表旋轉動效和投影效果。 默認值:false**說明:**若未設置trackShadow屬性,則該屬性控制投影效果的開關,開啟投影的效果為投影的默認效果。 若設置trackShadow屬性,則由trackShadow屬性值控制投影效果的開關。
valueColors10+Array<[ResourceColor][LinearGradient]>
trackBackgroundColor10+[ResourceColor]底板顏色。 默認值:'#08182431',格式為十六進制ARGB值,前倆位代表透明度。
strokeWidth10+[Length]圓環粗細。 默認值:24 單位:vp**說明:**設置小于0的值時,按默認值顯示。 數據面板的類型為DataPanelType.Line時該屬性不生效。
trackShadow10+[DataPanelShadowOptions]投影樣式。**說明:**設置null為不開啟投影。

DataPanelShadowOptions10+對象說明

名稱參數類型必填描述
radiusnumber[Resource]
colorsArray<[ResourceColor][LinearGradient]>
offsetXnumber[Resource]
offsetYnumber[Resource]

LinearGradient10+對象說明

線性漸變顏色描述。

LinearGradient(colorStops: ColorStop[])

名稱參數類型必填描述
colorStops[ColorStop]存儲漸變顏色和漸變點。

ColorStop10+對象說明

顏色斷點類型,用于描述漸進色顏色斷點。

名稱參數類型必填描述
color[ResourceColor]顏色值。
offset[Length]漸變色斷點(0~1之間的比例值,若數據值小于0則置為0,若數據值大于1則置為1)。**說明:**若傳入字符串類型且內容為數字,則轉換為對應的數值。 例如'10vp'轉換為10,'10%'轉換為0.1。HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

鴻蒙文檔.png

示例

示例1

// xxx.ets
@Entry
@Component
struct DataPanelExample {
  public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]

  build() {
    Column({ space: 5 }) {
      Row() {
        Stack() {
          DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
          Column() {
            Text('30').fontSize(35).fontColor('#182431')
            Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
          }

          Text('%')
            .fontSize(9.33)
            .lineHeight(12.83)
            .fontWeight(500)
            .opacity(0.6)
            .position({ x: 104.42, y: 78.17 })
        }.margin({ right: 44 })

        Stack() {
          DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
          Column() {
            Text('75').fontSize(35).fontColor('#182431')
            Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
          }

          Text('%')
            .fontSize(9.33)
            .lineHeight(12.83)
            .fontWeight(500)
            .opacity(0.6)
            .position({ x: 104.42, y: 78.17 })
        }
      }.margin({ bottom: 59 })

      DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
    }.width('100%').margin({ top: 5 })
  }
}

dataPanel

示例2

// xxx.ets
@Entry
@Component
struct LinearGradientDataPanelExample {
  public values1: number[] = [20, 20, 20, 20]
  public color1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }])
  public color2: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }])
  public colorShadow1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }])
  public colorShadow2: LinearGradient = new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }])
  public colorShadow3: LinearGradient = new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }])
  public colorShadow4: LinearGradient = new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }])
  @State color3: string = '#00FF00'
  @State color4: string = '#20FF0000'
  @State bgColor: string = '#08182431'
  @State offsetX: number = 15
  @State offsetY: number = 15
  @State radius: number = 5
  @State colorArray: Array< LinearGradient | ResourceColor > = [this.color1, this.color2, this.color3, this.color4]
  @State shadowColorArray: Array< LinearGradient | ResourceColor > = [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4]

  build() {
    Column({ space: 5 }) {
      Text('LinearGradient').fontSize(9).fontColor(0xCCCCCC).textAlign(TextAlign.Start).width('100%').margin({ top: 20, left: 20})
      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle })
        .width(300)
        .height(300)
        .valueColors(this.colorArray)
        .trackShadow({
          radius: this.radius,
          colors: this.shadowColorArray,
          offsetX: this.offsetX,
          offsetY: this.offsetY
        })
        .strokeWidth(30)
        .trackBackgroundColor(this.bgColor)
    }.width('100%').margin({ top: 5 })
  }
}

LinearGradientDataPanel

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 組件
    +關注

    關注

    1

    文章

    512

    瀏覽量

    17814
  • 鴻蒙
    +關注

    關注

    57

    文章

    2345

    瀏覽量

    42822
收藏 人收藏

    評論

    相關推薦

    HarmonyOS/OpenHarmony應用開發-ArkTS聲明開發范式

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

    HarmonyOS/OpenHarmony應用開發-聲明開發范式組件匯總

    組件是構建頁面的核心,每個組件通過對數據和方法的簡單封裝,實現獨立的可視、可交互功能單元。組件之間相互獨立,隨取隨用,也可以在需求相同的地方重復使用。聲明
    發表于 01-19 11:14

    鴻蒙ArkTS聲明組件:Blank

    空白填充組件,在容器主軸方向上,空白填充組件具有自動填充容器空余部分的能力。僅當父組件為Row/Column/Flex時生效。
    的頭像 發表于 06-19 16:21 ?549次閱讀
    <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聲明組件:Marquee

    跑馬燈組件,用于滾動展示一段單行文本。僅當文本內容寬度超過跑馬燈組件寬度時滾動,不超過時不滾動。
    的頭像 發表于 06-25 15:52 ?418次閱讀
    <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組件的子組件,用于顯示導航內容區。
    的頭像 發表于 06-27 14:05 ?487次閱讀
    <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組件區域按下時開始進入輸入狀態,手指離開屏幕時結束輸入狀態完成密碼輸入。
    的頭像 發表于 06-27 09:59 ?455次閱讀
    <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格式文本。
    的頭像 發表于 06-29 09:35 ?714次閱讀
    <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。
    的頭像 發表于 07-01 15:52 ?518次閱讀
    <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組件的子組件,用于顯示行內文本的組件。
    的頭像 發表于 07-01 09:14 ?458次閱讀
    <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]組件的頁面子組件。
    的頭像 發表于 07-02 17:47 ?405次閱讀
    <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

    多行文本輸入框組件,當輸入的文本內容超過組件寬度時會自動換行顯示。
    的頭像 發表于 07-02 15:02 ?673次閱讀
    <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

    單行文本輸入框組件。
    的頭像 發表于 07-03 09:14 ?949次閱讀
    <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

    滑動選擇文本內容的組件。
    的頭像 發表于 07-03 15:07 ?472次閱讀
    <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

    通過文本顯示計時信息并控制其計時器狀態的組件。
    的頭像 發表于 07-03 17:06 ?503次閱讀
    <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和媒體數據寫入,并顯示在XComponent組件
    的頭像 發表于 07-05 09:56 ?680次閱讀
    <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
    主站蜘蛛池模板: 野花香HD免费高清版6高清版| 午夜dj免费中文字幕| 青青草原在线免费| 日韩精品久久日日躁夜夜躁影视| 乳液全集电影在线观看| 无码AV免费精品一区二区三区 | 久久久久国产一级毛片高清片| 久久婷五月综合色啪网| 欧美激情社区| 试看2分钟AA片| 亚洲人成在线播放无码| 97国产精品久久精品国产| 插曲的痛30分钟视频最新章节| 国产激情视频在线播放| 男人的天堂黄色片| 色狗av影院| 亚洲视频中文字幕在线观看| 91桃色污无限免费看| 公交车被CAO到合不拢腿| 寂寞夜晚看免费视频| 暖暖视频免费观看视频| 四虎永久在线精品国产免费| 一本大道香蕉中文在线视频观看 | 365电影成人亚洲网在线观看| 拔擦拔擦8X永久华人免费播放器| 国产精品悠悠久久人妻精品| 久久99精国产一区二区三区四区 | 亚洲精品无码不卡| 24小时日本在线电影| 国产跪地吃黄金喝圣水合集| 久久久精品久久| 色色色久久久免费视频| 亚洲午夜久久久精品电影院| 爱做久久久久久| 娇妻玩4P被三个男人伺候电影| 欧美乱妇15p图| 亚洲伊人久久一次| 二级毛片在线观看| 老师湿乎乎两半嫩| 我在厨房摸岳的乳HD在线观看| 777ZYZ玖玖资源站最稳定网址|