鸿蒙实战案例——黑马健康（1）

莫名其妙的大头菜

已于 2024-06-21 19:41:08 修改

阅读量390

点赞数 8

文章标签： harmonyos 华为

于 2024-06-21 19:40:18 首次发布

本文链接：https://blog.csdn.net/ldld6666666/article/details/139867484

版权

前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

一、项目介绍

黑马健康App是一款功能全面的健康管理应用，黑马健康App通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。还提供个性化的推荐服务，确保用户能够获得最适合自己的健康和运动建议。总的来说，黑马健康App是一款功能全面、注重个性化推荐的健康管理应用，旨在为用户提供一站式的健康和运动解决方案。

二、具体页面实现

1.欢迎页面UI实现

1.整体页面布局分析

该页面整体为一个column列布局，在column容器里添加一些text 和 image组件

2.代码如下

welcomePage.ets

import common from '@ohos.app.ability.common'
import preferences from '@ohos.data.preferences'
import router from '@ohos.router'
import PreferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function textSx(opacity:number,fontsize:number=10){
.fontSize(fontsize)
  .opacity(opacity)
  .fontColor(Color.White)
}

const  PREF_KEY='userPrivacyKey'
@Entry
@Component
struct welcomePage {
   context= getContext(this) as common.UIAbilityContext //上下文
  controller:CustomDialogController=new CustomDialogController({
    builder:UserPrivacyDialog({
      confirm:()=>this.onConfirm(),
      cancel:()=>this.exitApp()
    })
  })
   async aboutToAppear(){
    //加载首选项
    let isAgree = await PreferenceUtil.getPreferenceValue( PREF_KEY,false)
    //判断是否同意
     if (isAgree) {
       //同意，跳转首页
       this.jumpToIndex()
     }
    else {
      //不同意，弹窗
      this.controller.open()
    }
  }
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }
   onConfirm(){
     //保存首选项
PreferenceUtil.putPreferenceValue(PREF_KEY,true)
     //跳转到首页
     this.jumpToIndex()
   }

exitApp(){
  //退出app
  this.context.terminateSelf()
}

  build() {
    Column({space:10}) {
     Row(){
       Image($r('app.media.home_slogan')).width(260)
     }.layoutWeight(1)
      Image($r('app.media.home_logo')).width(150)
      Row(){
        Text('黑马健康支持').textSx(0.8,12)

        Text('IPv6')
          .textSx(0.8)
          .border({style: BorderStyle.Solid,width:1,radius:15,color:Color.White})
          .padding({left:5,right:5})
        Text('网络').textSx(0.8,12)

      }
      Text('‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理').textSx(0.6)
      Text('浙ICP备0000000号-36D').textSx(0.4)
        .margin({bottom:35})
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

3.运行结果截图

2.欢迎页面业务--自定义弹窗

1.页面整体分析

该页面使用@CustmoDialog装饰器自定义了一个遵循弹窗组件，在页面中声明一个弹窗控制器，利用该控制器来打开弹窗

 controller:CustomDialogController=new CustomDialogController({
    builder:UserPrivacyDialog({
      confirm:()=>this.onConfirm(),
      cancel:()=>this.exitApp()
    })
  })

系统提示是否同意条约，同意则跳转到首页，并将用户首选项保存起来，不同意则退出程序。

2.代码如下（部分）

UserPrivacyDialog.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
 export default  struct UserPrivacyDialog {
   controller:CustomDialogController
    confirm:()=>void
     cancel:()=>void

  build() {
    Column({space:CommonConstants.SPACE_10}){
      //标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      //内容
      Text($r('app.string.user_privacy_content'))

       //按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          this.confirm()
          this.controller.close()
        })
      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(()=>{
          this.cancel
          this.controller.close()
        })
    }
    .width('100%')
    .padding(10)
  }
}