黑马健康项目

一 项目目标

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

性的移动应用软件

二 项目介绍

黑马健康app是一款通过记录饮食，食物营养成分，以及提供运动可消耗热量的app，用户可以查看饮食记录帮助用户清晰的得知自己的个人身体热量与营养的摄入与消耗以及还可摄入多少热量

1，不同设备布局

import mediaQuery from '@ohos.mediaquery'
import BreakpointConstants from '../constants/BreakpointConstants'

export default class BreakpointSystem{

  private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM)
  private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD)
  private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG)
               //三种屏幕大小范围
  smListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM)
    }
  }

  mdListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD)
    }
  }

  lgListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG)
    }
  }

  updateCurrentBreakpoint(breakpoint: string){
    AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT, breakpoint)
  }

  register(){
    this.smListener.on('change', this.smListenerCallback.bind(this))
    this.mdListener.on('change', this.mdListenerCallback.bind(this))
    this.lgListener.on('change', this.lgListenerCallback.bind(this))
  }

  unregister(){
    this.smListener.off('change', this.smListenerCallback.bind(this))
    this.mdListener.off('change', this.mdListenerCallback.bind(this))
    this.lgListener.off('change', this.lgListenerCallback.bind(this))
  }
}

2，不同设备断点标记

import BreakpointType from '../bean/BreanpointType';
export default class BreakpointConstants {
  /**
   * 小屏幕设备的 Breakpoints 标记.
   */
  static readonly BREAKPOINT_SM: string = 'sm';

  /**
   * 中等屏幕设备的 Breakpoints 标记.
   */
  static readonly BREAKPOINT_MD: string = 'md';

  /**
   * 大屏幕设备的 Breakpoints 标记.
   */
  static readonly BREAKPOINT_LG: string = 'lg';

  /**
   * 当前设备的 breakpoints 存储key
   */
  static readonly CURRENT_BREAKPOINT: string = 'currentBreakpoint';

  /**
   * 小屏幕设备宽度范围.
   */
  static readonly RANGE_SM: string = '(320vp<=width<600vp)';

  /**
   * 中屏幕设备宽度范围.
   */
  static readonly RANGE_MD: string = '(600vp<=width<840vp)';

  /**
   * 大屏幕设备宽度范围.
   */
  static readonly RANGE_LG: string = '(840vp<=width)';

  static readonly BAR_POSITION: BreakpointType<BarPosition> = new BreakpointType({
    sm: BarPosition.End,
    md: BarPosition.Start,
    lg: BarPosition.Start,
  })
}

3，不同设备判断断点类型

declare interface BreakpointTypeOptions<T>{
  sm?:T,
  md?:T,
  lg?:T
}

export default class BreakpointType<T>{
  options: BreakpointTypeOptions<T>

  constructor(options: BreakpointTypeOptions<T>) {
    this.options = options
  }

  getValue(breakpoint: string): T{
    return this.options[breakpoint]
  }
}

总结：

1，导入了mediaQuery模块来监听媒体查询变化，以及BreakpointConstants常量类，用于定义不同屏幕尺寸的断点范围和存储键名。smListener, mdListener, lgListener: 分别代表小屏、中屏、大屏的媒体查询监听器，通过matchMediaSync方法同步匹配当前屏幕尺寸是否符合这些断点范围。updateCurrentBreakpoint(breakpoint: string): 根据传入的断点字符串（如BREAKPOINT_SM），使用AppStorage.SetOrCreate方法更新存储中的当前断点标识。这有助于全局范围内追踪和响应屏幕尺寸变化。

2，BREAKPOINT_SM: 标记小屏幕设备。
     BREAKPOINT_MD: 标记中等屏幕设备。
     BREAKPOINT_LG: 标记大屏幕设备。

CURRENT_BREAKPOINT: 用于存储当前设备所匹配的断点标记的键名，便于在应用中全局访问和更新。RANGE_SM, RANGE_MD, RANGE_LG: 分别定义了小、中、大屏幕设备的宽度范围，采用视口单位(vp)来指定，适配不同屏幕尺寸的布局。

3，BreakpointTypeOptions<T>: 定义了一个泛型接口，用于描述包含不同屏幕断点（sm, md, lg）的配置选项。每个断点可以关联一个类型为T的值BreakpointType<T>: 这是一个泛型类，继承了上述接口的逻辑，用于处理和提供基于断点的值接收一个类型为BreakpointTypeOptions<T>的参数options，用于初始化this.options。

getValue(breakpoint: string): T: 根据传入的断点名称（如'sm'、'md'或'lg'），从options中返回对应的值。如果断点不存在，则返回undefined（因为 TypeScript 中对象属性默认可选）