鸿蒙期末个人项目“黑马健康”——项目阶段五：多设备响应式布局

目录

项目介绍：

分析：

页面实现效果：

重点实现：

阶段项目代码：

---

项目介绍：

    黑马健康软件是一款基于全民健康的软件，主要有三个页面组成，分别是欢迎页面，统计记录页面，食物列表页面。

分析：

       利用mediaQuery设置媒体的查询条件，设置对屏幕宽度做查询，根据屏幕的不同宽度的不同范围，划分大值的区分范围来区别设备，每个范围指定一个对应的字符串状态，分别是：sm、md、lg。之后给设备查询的监听器设置回调函数，当媒体状态发生变更时，三个设备的监听器便会被触发，通过回调函数改变状态，作为设备标记保存在AppStorage中。之后页面变回利用@StorageProp读取当前设备标记，之后页面组件的属性中就可以通过设备标记来实现不同设备的渲染，达到响应式布局的效果。

页面实现效果：

手机设备的实现效果：

折叠手机的实现效果

平板的实现效果：

重点实现：

1.为了优雅的去传值，不用下面所述的这种声明对象方式

  //根据设备选择导航的布局
  // chooseBarPosition(){
  //   //定义对象，根据对象名key来返回值
  //   return new BreakpointType({
  //     sm:BarPosition.End,
  //     md:BarPosition.Start,
  //     lg:BarPosition.Start
  //   }).getValue(this.currentBreakpoint)
  //   // let p = {
  //   //   sm: BarPosition.End,
  //   //   md:BarPosition.Start,
  //   //   lg:BarPosition.Start
  //   // }
  //   // return p[this.currentBreakpoint]