期末实战——黑马健康4

标签：实战 BreakpointConstants string app 期末 BREAKPOINT mediaQuery 黑马设备

黑马健康4 —— 一次开发多端部署

文章目录

黑马健康4 —— 一次开发多端部署
前言
一、项目介绍
二、应用运行 —— 一次开发多端部署
总结
- 1.知识补充
- 2.代码优化

前言

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

一、项目介绍

黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。

二、应用运行 —— 一次开发多端部署

1.页面整体分析——多设备响应式布局

随着科技的飞速发展，用户应用端设备的种类愈发丰富，涵盖了从折叠屏手机、平板电脑到传统电脑等多样化的终端。这些设备不仅在设计、功能上存在差异，更重要的是它们所搭载的屏幕在尺寸、显示比例上等各不相同。因此，在开发应用时，我们必须充分考虑并适应这些多样化的设备特性。在渲染页面时，应该动态地判断当前设备的屏幕大小，根据屏幕大小的不同，渲染不同的效果，以确保应用能够在各种设备上提供一致且优化的用户体验。因此，在开发应用时，我们应当充分重视多设备响应式布局并实践多设备响应式布局的理念，以确保应用在各种设备上都能展现出最佳的表现。
在这里插入图片描述

2.代码如下（示例）

Index.ets
代码如下：

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private breakpointSystem:BreakpointSystem=new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint:string =BreakpointConstants.BREAKPOINT_SM//StorageProp必须初始化

  //自定义Tabs样式
  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) { //参数 变量
    Column({ space: CommonConstants.SPACE_8 }) {
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index)) //fillColor图片必须是svg格式
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  } //法一：加点击事件 改变curr...

  aboutToAppear(){
    this.breakpointSystem.register()//注册
  }

  aboutToDisappear(){
    this.breakpointSystem.unregister()//取消注册
  }

  selectColor(index: number) {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray') //是 主色调；不是 灰色

  }


  build() {
    //Tabs本身就是个容器 Tab组件可以实现页面内视图内容快速切换，包含Tabar和TabContent两个部分
    Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint)}) {
      TabContent() {
        RecordIndex()//定义单独组件去写
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0)) //记录
      TabContent() {
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))

      TabContent() {
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))
    }
    .width('100%')
    .height('100%')
    //法二
    .onChange(index => this.currentIndex = index)

    .vertical(new BreakpointType({
      sm:false,
      md:true,
      lg:true
    }).getValue(this.currentBreakpoint))//纵向 动态变化
  }
}
//响应式布局

BreakpointConstants.ets
代码如下：

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

BreakpointSystem.ets
代码如下：

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

  }

}

3.运行效果截图

三款不同设备的效果显示图
在这里插入图片描述

总结

1.知识补充

媒体查询：
1.导入媒体查询模块
2.设置媒体查询条件，并获取对应的listener
语法规则：
（媒体类型、媒体逻辑操作、媒体特征）
3.给listener设置回调函数，当设备状态变化时会执行回调函数
4.将设备状态记录到全局状态中
在这里插入图片描述

2.代码优化

1.在Index.ets中
将下面代码
在这里插入图片描述
优化成下面代码

2.在Index.ets中对下图代码进行优化

优化方法：将对象结构定义成一个类型，再定义一个方法
首先，创建BreakpointType.ets并进行代码编写

其次，将上图代码优化成下面样式

此外，并将此处代码进行优化
在这里插入图片描述
修改为下面代码

3.继续优化
在BreakpointConstants页面中
添加

定义为常量
删掉红框内的内容
并将下方内容修改