HarmonyOS開發(fā)案例：【生活健康app之獲取成就】（3）

獲取成就

本節(jié)將介紹成就頁面。

功能概述

成就頁面展示用戶可以獲取的所有勛章，當(dāng)用戶滿足一定的條件時(shí)，將點(diǎn)亮本頁面對(duì)應(yīng)的勛章，沒有得到的成就勛章處于熄滅狀態(tài)。共有六種勛章，當(dāng)用戶連續(xù)完成任務(wù)打卡3天、7天、30天、50天、73天、99天時(shí)，可以獲得對(duì)應(yīng)的“連續(xù)xx天達(dá)成”勛章。

頁面布局與 ArkTS 代碼對(duì)應(yīng)關(guān)系

效果如圖所示：

標(biāo)題部分TitleBar是一個(gè)橫向容器Row里包含一個(gè)子組件Text。

開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔：[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)
  }
}

每個(gè)勛章卡片BadgeCard是由一個(gè)豎向容器Column、一個(gè)圖片子組件Image和一個(gè)文字子組件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一個(gè)組件即可以實(shí)現(xiàn)均分和換行的功能。

// 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)
  }
}

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

獲取數(shù)據(jù)

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

// 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;
}

審核編輯 黃宇