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

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

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

3天內不再提示

HarmonyOS開發(fā)案例:【rating組件】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-26 14:54 ? 次閱讀

介紹

將引導開發(fā)者使用rating組件實現星級打分功能。

相關概念

  • [rating組件]:評分條,可根據用戶判斷進行打分。

環(huán)境搭建

軟件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release及以上版本。
  • OpenHarmony SDK版本:API version 9及以上版本。

硬件要求

  • 開發(fā)板類型:[潤和RK3568開發(fā)板]。
  • OpenHarmony系統(tǒng):3.2 Release及以上版本。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建,本示例以RK3568開發(fā)板為例,參照以下步驟進行:

  1. [獲取OpenHarmony系統(tǒng)版本]:標準系統(tǒng)解決方案(二進制)。以3.2 Release版本為例:
  2. 搭建燒錄環(huán)境。
    1. [完成DevEco Device Tool的安裝]
    2. [完成RK3568開發(fā)板的燒錄]
  3. 搭建開發(fā)環(huán)境。
    1. 開始前請參考[工具準備],完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
    2. 開發(fā)環(huán)境配置完成后,請參考[使用工程向導]創(chuàng)建工程(模板選擇“Empty Ability”)。
    3. 工程創(chuàng)建完成后,選擇使用[真機進行調測]。
    4. 鴻蒙開發(fā)指導文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

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

代碼結構解讀

本篇Codelab只對核心代碼進行講解,對于完整代碼,我們會在gitee中提供。

HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

├──entry/src/main/js                          // 代碼區(qū)
│  └──MainAbility
│     ├──common
│     │  └──images
│     │     ├──star_focus_yellow.svg          // 前景圖片
│     │     ├──star_half_yellow.svg           // 次級背景圖片
│     │     └──star_nor.svg                   // 背景圖片
│     ├──i18n
│     │  ├──en-US.json	                      // 英文國際化
│     │  └──zh-CN.json	                      // 中文國際化
│     ├──pages
│     │  └──index
│     │     ├──index.css                      // 星級打分頁面樣式
│     │	    ├──index.hml                      // 星級打分頁面
│     │	    └──index.js                       // 星級打分頁面邏輯
│     └──app.js                               // 程序入口
└──entry/src/main/resource                    // 應用靜態(tài)資源目錄

頁面布局

界面主要由自定義星級打分和平均分等級兩個部分組成。

本應用使用div組件用作外層容器,并將自定義星級組件和平均分等級分別放在兩個div組件中。除此之外,自定義星級打分還使用了列表渲染,使用for循環(huán)一次渲染多個組件,onchange參數可以設置組件使用的事件響應方法,參數中的$idx則代表數組中的元素的索引值。

< !-- index.hml -- >
< div class="container" >
    < !-- 自定義打分組件-- >
    < div class="sub-container" >
        ...
        < rating for="{{ ratings }}" onchange="rateChange({{ $idx }})" class="rate" rating="3" >< /rating >
    < /div >

    < !-- 平均分等級展示-- >
    < div class="sub-container-average" >
        ...
        < rating class="rate-avg" indicator="true" stepsize="0.1" rating="{{ avg }}" >< /rating >
        ...
    < /div >
< /div >

為組件設計樣式

自定義星級打分的rating組件還可以設置星星樣式,需要設置以下三個參數:

  • star-background:背景圖片,沒被選中時使用的圖片。
  • star-foreground:前景圖片,完全被選中時使用的圖片,或未被完全選中時左側使用的圖片。
  • star-secondary:次級背景圖片,未被完全選中時右側使用的圖片。
/* index.css */
/* 自定義星級打分樣式 */
.rate {
    star-background: url("/common/images/ic_star_nor.svg");
    star-foreground: url("/common/images/ic_star_focus_yellow.svg");
    star-secondary: url("/common/images/ic_star_half_yellow.svg");
    width: 140vp;
    height: 30vp;
    margin-bottom: 10vp;
}

數據處理

數據初始化,使用數組記錄rating組件的分值,使用avg變量記錄平均值。

// index.js
export default {
  data: {
    ratings: new Array(3, 3, 3),
    avg: 3
  },
  ...
}

當rating發(fā)生變化時,根據索引值更改對應元素的數據,并重新計算平均值。

// index.js
rateChange(idx, event) {
  this.ratings.splice(idx, 1, event.rating);
  this.getAvg();
},
getSum(total, num) {
  return total + num;
},
getAvg() {
  const value = this.ratings.reduce(this.getSum) / this.ratings.length;
  this.avg = value.toFixed(1);
}

審核編輯 黃宇

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

    關注

    57

    文章

    2388

    瀏覽量

    42964
  • HarmonyOS
    +關注

    關注

    79

    文章

    1980

    瀏覽量

    30404
  • OpenHarmony
    +關注

    關注

    25

    文章

    3744

    瀏覽量

    16473
收藏 人收藏

    評論

    相關推薦

    HarmonyOS開發(fā)案例:【 slider組件的使用】

    主要介紹slider滑動條組件的使用。如圖所示拖動對應滑動條調節(jié)風車的旋轉速度以及縮放比例。
    的頭像 發(fā)表于 04-25 22:02 ?1018次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【 slider<b class='flag-5'>組件</b>的使用】

    HarmonyOS開發(fā)案例:【使用List組件實現商品列表】

    OpenHarmony ArkTS提供了豐富的接口和組件開發(fā)者可以根據實際場景和開發(fā)需求,選用不同的組件和接口。
    的頭像 發(fā)表于 05-10 16:41 ?1409次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【使用List<b class='flag-5'>組件</b>實現商品列表】

    HarmonyOS開發(fā)案例:【Web組件實現抽獎】

    基于ArkTS的聲明式開發(fā)范式的樣例,主要介紹了Web組件如何加載本地和云端H5小程序。
    的頭像 發(fā)表于 05-09 18:31 ?1421次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【Web<b class='flag-5'>組件</b>實現抽獎】

    HarmonyOS開發(fā)案例:【基礎組件Slider的使用】

    學習如何使用聲明式UI編程框架的基礎組件。本篇Codelab將會使用Image組件、Slider組件、Text組件共同實現一個可調節(jié)的風車動畫
    的頭像 發(fā)表于 05-10 16:01 ?702次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【基礎<b class='flag-5'>組件</b>Slider的使用】

    HarmonyOS開發(fā)案例:【常用組件與布局】

    HarmonyOS ArkUI提供了豐富多樣的UI組件,您可以使用這些組件輕松地編寫出更加豐富、漂亮的界面。
    的頭像 發(fā)表于 05-09 18:20 ?1271次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【常用<b class='flag-5'>組件</b>與布局】

    HarmonyOS IoT 硬件開發(fā)案例分享

    ``許思維老師HiSpark Wi-Fi IoT 開發(fā)案例分享:案例一:AHT20溫濕度傳感器開發(fā)、調試;案例二:oled屏驅動庫移植,調試;案例三:用OLED屏播放視頻,Wi-Fi 和 TCP/IP 綜合應用。 ``
    發(fā)表于 10-27 17:30

    【基于HarmonyOS開發(fā)購物應用】AnBetter Codelab第二期記錄帖

    (marquee),菜單組件(menu),滑動選擇器組件(picker),進度條組件(progress),評分條組件rating),搜索框
    發(fā)表于 04-17 00:55

    HarmonyOS應用開發(fā)資料(Svg組件

    1、HarmonyOS應用開發(fā)-Svg組件circle  該組件從API version 7開始支持。后續(xù)版本如有新增內容,則采用上角標單獨標記該內容的起始版本。2、
    發(fā)表于 03-17 14:49

    組件資料】HarmonyOS三方件開發(fā)指南

    1、HarmonyOS三方件開發(fā)指南——LoadingView組件1.LoadingView組件功能介紹1.1.功能介紹:LoadingView組件
    發(fā)表于 03-21 11:18

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

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

    HarmonyOS/OpenHarmony原生應用-ArkTS萬能卡片組件Rating

    提供在給定范圍內選擇評分的組件。該組件從API Version 7開始支持。無子組件。 一、接口 Rating(options?: { rating
    發(fā)表于 10-17 15:09

    HarmonyOS鴻蒙原生應用開發(fā)設計- 服務組件

    HarmonyOS設計文檔中,為大家提供了一些已經設計好的原生服務組件庫,開發(fā)者可以根據需要直接引用。 開發(fā)者直接使用官方提供的服務組件庫樣
    發(fā)表于 10-24 16:12

    華為開發(fā)HarmonyOS零基礎入門:UI組件設計開發(fā)實踐

    華為開發(fā)HarmonyOS零基礎入門:UI組件設計開發(fā)實踐之圖庫應用介紹,應用數據加載顯示模型圖片加載渲染功能快速在其他應用上。
    的頭像 發(fā)表于 10-23 10:58 ?1700次閱讀
    華為<b class='flag-5'>開發(fā)</b>者<b class='flag-5'>HarmonyOS</b>零基礎入門:UI<b class='flag-5'>組件</b>設計<b class='flag-5'>開發(fā)</b>實踐

    華為開發(fā)者分論壇HarmonyOS學生公開課-OpenHarmony Codelabs開發(fā)案

    2021華為開發(fā)者分論壇HarmonyOS學生公開課-OpenHarmony Codelabs開發(fā)案
    的頭像 發(fā)表于 10-24 11:25 ?1944次閱讀
    華為<b class='flag-5'>開發(fā)</b>者分論壇<b class='flag-5'>HarmonyOS</b>學生公開課-OpenHarmony Codelabs<b class='flag-5'>開發(fā)案</b>例

    HarmonyOS開發(fā)案例:【 switch、chart組件的使用】

    基于switch組件和chart組件,實現線形圖、占比圖、柱狀圖,并通過switch切換chart組件數據的動靜態(tài)顯示。
    的頭像 發(fā)表于 04-25 20:58 ?671次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發(fā)案</b>例:【 switch、chart<b class='flag-5'>組件</b>的使用】
    主站蜘蛛池模板: 女子初尝黑人巨嗷嗷叫| 欧美一级情欲片在线| 国产精品久久久久久AV免费不卡 | 国产综合欧美区在线| 久久久久久久国产精品视频| 美女叉腿掰阴大胆艺术照| 人妻超级精品碰碰在线97视频| 亚洲地址一地址二地址三| 这里只有精品在线视频| 高H辣肉办公室| 久久精麻豆亚洲AV国产品| 日本免费xxx| 97久久伊人精品影院| 国产人妻XXXX精品HD电影| 欧美精品AV一区二区无码| 亚洲日本欧美产综合在线| 96精品视频| 欧美最猛12teevideos| 把腿张开JI巴CAO死你H教室| 久草在在线免视频在线观看| 日韩男明星| 56prom在线精品国产| 好男人视频免费高清在线观看www| 欧洲xxxxx| 大相蕉伊人狼人久草av| 美女PK精子小游戏| vidosgratis tv少女| 美女乱草鲍高清照片| 亚洲卫视论坛| 国产精品无码人妻在线| 日本高清免费一本视频在线观看| 大香伊人久久| 亚洲精品国产第一区第二区| 国产日韩成人内射视频| 亚洲欧美日韩一级特黄在线| 美女被触手注入精子强制受孕漫画| yellow免费观看直播| 星空无限传媒视频在线观看视频| 动漫在线观看免费肉肉| 亚洲成a人不卡在线观看| 两性色午夜视频免费国产|