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

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

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

3天內不再提示

HarmonyOS開發案例:【生活健康app之獲取成就】(3)

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-05-10 17:18 ? 次閱讀

獲取成就

本節將介紹成就頁面。

功能概述

成就頁面展示用戶可以獲取的所有勛章,當用戶滿足一定的條件時,將點亮本頁面對應的勛章,沒有得到的成就勛章處于熄滅狀態。共有六種勛章,當用戶連續完成任務打卡3天、7天、30天、50天、73天、99天時,可以獲得對應的“連續xx天達成”勛章。

頁面布局與 ArkTS 代碼對應關系

效果如圖所示:

標題部分TitleBar是一個橫向容器Row里包含一個子組件Text。

開發前請熟悉鴻蒙開發指導文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

// TitleBarComponent.ets
@Component
export struct TitleBar {
  build() {
    Row() {
      Text($r('app.string.achievement'))
        .fontSize($r('app.float.default_24'))
        .fontColor($r('app.color.white'))
        .align(Alignment.Start)
        .padding({left: Const.ACHIEVE_TITLE_BAR_LEFT,top: Const.ACHIEVE_TITLE_BAR_TOP})
    }
    .width(Const.FULL_WIDTH)
  }
}

每個勛章卡片BadgeCard是由一個豎向容器Column、一個圖片子組件Image和一個文字子組件Text組成。

// BadgeCardComponent.ets
@Component
export struct BadgeCard {
  @Prop content: string = '';
  imgSrc: Resource = $r('app.string.empty');

  build() {
    Column({space: Const.DEFAULT_18}) {
      Image(this.imgSrc)
        .width(Const.FULL_WIDTH)
        .height(Const.ACHIEVE_CARD_IMG_HEIGHT)
        .objectFit(ImageFit.Contain)
      Text($r('app.string.task_achievement_level', Number(this.content)))
        .lineHeight($r('app.float.default_16'))
        .fontSize($r('app.float.default_12'))
        .fontColor($r('app.color.white'))
    }
    .width(ratio2percent(Const.ACHIEVE_SPLIT_RATIO))
    .padding({top: Const.ACHIEVE_CARD_TOP, bottom: Const.ACHIEVE_CARD_BOTTOM})
  }
}

整體的勛章面板使用Flex一個組件即可以實現均分和換行的功能。

// BadgePanelComponent.ets
@Component
export struct BadgePanel {
  @StorageProp(ACHIEVEMENT_LEVEL_KEY) successiveDays: number = 0;

  aboutToAppear() {
    Logger.debug('BadgePanel','aboutToAppear');
    getAchievementLevel();
  }

build() {
  Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
    ForEach(getBadgeCardItems(this.successiveDays), (item: CardInfo) = > {
      BadgeCard({ content: item.titleContent, imgSrc: item.achievement})
    })
  }
  .width(Const.FULL_WIDTH)
  }
}

`HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789v直接拿`

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

獲取數據

進入界面第一次獲取數據在aboutToAppear()聲明周期中從數據庫GlobalInfo表中獲取存儲的勛章數據, 通過@StorageProp裝飾器刷新界面,其他的地方只要通過AppStorage更新勛章數據即可。

// BadgePanelComponent.ets
aboutToAppear() {
  Logger.debug('BadgePanel','aboutToAppear');
  getAchievementLevel();
}

// AchieveModel.ets
export function getAchievementLevel() {
  GlobalInfoApi.query((res: GlobalInfo) = > {
    let globalInfo: GlobalInfo = res;
    let achievementStr = globalInfo.achievements??'';
    let achievements = achievementStr.split(',');
    if (achievements.length > 0) {
      AppStorage.Set< Number >(ACHIEVEMENT_LEVEL_KEY, Number(achievements[achievements.length - 1]));
    }
  })
}

// BadgePanelComponent.ets
@StorageProp(ACHIEVEMENT_LEVEL_KEY) successiveDays: number = 0;

ForEach(getBadgeCardItems(this.successiveDays), (item: CardInfo) = > {
  BadgeCard({ content: item.titleContent, imgSrc: item.achievement})
})

// AchievementViewModel.ets
export function getBadgeCardItems(successiveDays: number): Array< CardInfo > {
  let badgeMileStones = ACHIEVEMENT_LEVEL_LIST;
  let cardItems: Array< CardInfo > = [];
  for (let i = 0; i < badgeMileStones.length; i++) {
    let onOrOff = successiveDays >= badgeMileStones[i] ? 'on' : 'off';
    let titleContent = String(badgeMileStones[i]);
    let cardInfo: CardInfo = new CardInfo();
    cardInfo.titleContent = titleContent;
    cardInfo.achievement = getAchievement(`${ onOrOff }_${ badgeMileStones[i] }`);
    cardItems.push(cardInfo);
  }
  return cardItems;
}

審核編輯 黃宇

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

    關注

    57

    文章

    2347

    瀏覽量

    42827
  • HarmonyOS
    +關注

    關注

    79

    文章

    1974

    瀏覽量

    30159
  • OpenHarmony
    +關注

    關注

    25

    文章

    3718

    瀏覽量

    16289
收藏 人收藏

    評論

    相關推薦

    HarmonyOS開發案例:【生活健康app之首頁啟動】(1)

    用戶可以創建最多6個健康生活任務(早起,喝水,吃蘋果,每日微笑,刷牙,早睡),并設置任務目標、是否開啟提醒、提醒時間、每周任務頻率。
    的頭像 發表于 05-10 11:49 ?953次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發案</b>例:【<b class='flag-5'>生活</b><b class='flag-5'>健康</b><b class='flag-5'>app</b>之首頁啟動】(1)

    HarmonyOS開發案例:【生活健康app之實現打卡功能】(2)

    首頁會展示當前用戶已經開啟的任務列表,每條任務會顯示對應的任務名稱以及任務目標、當前任務完成情況。用戶只可對當天任務進行打卡操作,用戶可以根據需要對任務列表中相應的任務進行點擊打卡。如果任務列表中的每個任務都在當天完成則為連續打卡一天,連續打卡多天會獲得成就徽章。
    的頭像 發表于 05-10 15:29 ?677次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發案</b>例:【<b class='flag-5'>生活</b><b class='flag-5'>健康</b><b class='flag-5'>app</b>之實現打卡功能】(2)

    HarmonyOS開發案例:【生活健康app編寫通用工具類】(5)

    本節將介紹日志打印、時間換算等通用工具類的編寫和使用,工具類可以簡化應用代碼編寫和業務流程處理。
    的頭像 發表于 05-11 09:58 ?528次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發案</b>例:【<b class='flag-5'>生活</b><b class='flag-5'>健康</b><b class='flag-5'>app</b><b class='flag-5'>之</b>編寫通用工具類】(5)

    HarmonyOS】專訪華為楊海松:立足合作伙伴價值,構建健康HarmonyOS生態

    本帖最后由 l_xy 于 2020-11-3 11:42 編輯 從華為開發者大會HDC.2020 HarmonyOS 2.0 推出到現在,已經有大批的開發者和合作伙伴相繼與
    發表于 11-02 15:26

    【潤和直播課預告@華為開發者學院】HarmonyOS設備開發基礎課程|HiSpark WiFi-IoT 智能小車套件開發案

    `【潤和直播課預告@華為開發者學院】HarmonyOS設備開發基礎課程|HiSparkWiFi-IoT 智能小車套件開發案例,3月18日(周
    發表于 03-16 15:01

    Linux應用開發手冊Python開發案

    本文檔涉及的開發案例位于產品資料“4-軟件資料\Demo\”路徑下的base-demos和python-demos目錄。base-demos目錄存放Linux常用開發案例,案例bin目錄存放
    發表于 05-11 10:21

    絕對干貨!HarmonyOS開發者日資料全公開,鴻蒙開發者都在看

    HarmonyOS Codelabs 開發樣例概覽:該主題講解HarmonyOS核心技術能力,圍繞智慧生活的7大場景,介紹Codelabs開發案
    發表于 08-04 14:36

    harmonyOS開發APP如何訪問Webservice?

    我接到一個項目,需要用到HarmonyOS開發APP做為移動手機查詢和收到報警數據,具體是這樣的,在C/S加B/S的系統框架下我們有數據庫服務器和Web服務器,有widows桌面應用和Web瀏覽器
    發表于 03-28 10:14

    鴻蒙智聯生態產品《接入智慧生活App開發指導》(官方更新版)

    HarmonyOS Connect生態產品應用開發過程中,很多開發者對于如何接入智慧生活App還存在一些疑問,如:如何選擇合適的
    發表于 04-26 15:00

    4天帶你上手HarmonyOS ArkUI開發

    本次HarmonyOS ArkUI入門訓練營課程--健康生活實戰篇,手把手教大家如何制作一個合理膳食的APP前端Demo!課程實戰樣例通過ArkUI聲明式UI開發框架實現,只需用幾行簡
    發表于 09-09 14:44

    4天帶你上手HarmonyOS ArkUI開發——《HarmonyOS ArkUI入門訓練營健康生活實戰》

    HarmonyOS ArkUI入門訓練營健康飲食應用》是面向入門開發者打造的實戰課程系列。特邀華為終端BG高級開發工程師作為本次訓練營講
    發表于 01-05 11:49

    App開發案例教程PDF電子書免費下載

    App開發案例教程》通過一個實例,介紹App設計、開發直至上線的全過程,引導讀者在較短時間內熟悉一個較大規模的App應用系統的
    發表于 08-05 08:00 ?38次下載
    <b class='flag-5'>App</b><b class='flag-5'>開發案</b>例教程PDF電子書免費下載

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

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

    HarmonyOS家庭寵物健康監測系統開發方案

    本期我們給大家帶來的是家庭寵物健康監測系統開發者楊光的分享,希望能給你的HarmonyOS開發之旅帶來啟發~
    的頭像 發表于 03-03 10:24 ?2491次閱讀

    如何接入智慧生活App

     在HarmonyOS Connect生態產品應用開發過程中,很多開發者對于如何接入智慧生活App還存在一些疑問,如:如何選擇合適的
    的頭像 發表于 04-25 10:42 ?3679次閱讀
    如何接入智慧<b class='flag-5'>生活</b><b class='flag-5'>App</b>
    主站蜘蛛池模板: 青青久| av老司机色爱区综合| 男人吃奶摸下弄进去好爽| 国产福利高清在线视频| 正在播放国产尾随丝袜美女| 三级黃60分钟| 年轻的老师5理伦片| 韩日午夜在线资源一区二区| 丰满少妇被猛烈进出69影院| 98久久人妻少妇激情啪啪| 亚洲人成人毛片无遮挡| 少妇内射视频播放舔大片| 女人一级毛片免费视频观看| 久久国产精品免费A片蜜芽| 国产欧美一区二区精品久久久| mdapptv麻豆下载| 69精品国产人妻蜜桃国产毛片| 亚洲免费国产| 新版孕妇bbwbbwbbw| 日韩欧美国产免费看清风阁| 嫩草影院在线观看精品| 久久亚洲精品AV成人无| 后入内射国产一区二区| 国产人妻人伦精品9| 国产成人综合在线视频| 大桥未久电影在线| 成人毛片大全| 把腿张开再深点好爽宝贝| 97久久超碰中文字幕| 0855福利| 最新国自产拍天天更新| 最新无码国产在线视频2020| 在线成年av动漫电影| 印度学生xxxxx性14一16| 亚洲综合国产精品| 亚洲视频在线免费看| 亚洲精品乱码一区二区三区 | 男女生爽爽爽视频免费观看| 久久久久久久久女黄| 久久人妻AV一区二区软件| 绝逼会被锁|